Select - adjust native menu placement and opening and fix undefined icon

[thrbnhrtmnn]

Description / User story

The select should be closely aligned in design and code.

• For this the native menu placement in code should ideally be exactly as in design.
• Additionally one improvement of the select would be if the native menu opens no matter where a user clicks in the input field. Currently in code it only opens when you click on the text. Most importantly the menu should also be shown when a user clicks on the icon. Ideally we find a similar solution to how it is done in the text area, where clicking anywhere within the input field allows for an input to be made.
• Furthermore the menu should also open select should be focused when you click on the label similar to how it works for text area and input field text.
• Lastly if icon = undefined we still show an icon in code. This should be fixed so we do not show an icon in this case.

Requirements / Prerequisites

• none

Acceptance Criteria

• The native menu is placed in the coded component similar to how it is shown in design
• The native menu opens, when a user clicks on the icon (even better, if possible: The native menu opens when a user clicks anywhere in the input field)
• The native menu opens gets focused, when a user clicks on the label (even better, if possible: also the gap between label and input field is clickable)
• If icon = undefined, no icon is shown in the input field

Additional information

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#styling_with_css

Code of Conduct

• I agree to follow this project's Code of Conduct