Select component to use native HTML select

packages/pxweb2-ui/src/lib/components/Select/Select.module.scss

@@ -1,8 +1,5 @@
 @use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
-
-.iconColor {
-  --px-icon-color: var(--px-color-icon-action);
-}
+@use '../../text-styles.scss';
 
 // ----------------------------------------------------
 // --- CSS classes for the default Select component ---
@@ -22,13 +19,24 @@
   align-self: stretch;
 }
 
-.contentStyle {
+.selectWrapper {
   display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.optionLayout {
+  appearance: none;
+  border: none;
+  width: 100%;
   height: 48px;
+
+  display: flex;
   padding: fixed.$spacing-2 fixed.$spacing-3;
   align-items: center;
   gap: fixed.$spacing-2;
   align-self: stretch;
+  position: relative;
 
   border-radius: var(--px-border-radius-medium);
   box-shadow: inset 0 0 0 2px var(--px-color-border-default);
@@ -54,24 +62,20 @@
   }
 }
 
-.optionLayout {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  flex: 1 0 0;
-}
-
-.optionTypography {
-  overflow: hidden;
-  color: var(--px-color-text-default);
-  text-overflow: ellipsis;
-}
-
 .visuallyHidden {
   display: none;
 }
 
+.iconColor {
+  --px-icon-color: var(--px-color-icon-action);
+  position: absolute;
+  font-size: 1.5rem;
+  pointer-events: none;
+  align-self: center;
+  background: var(--px-color-surface-default);
+  inset-inline-end: fixed.$spacing-3;
+}
+
 // --------------------------------------------------------
 // --- CSS classes for the Variabelbox Select component ---
 // --------------------------------------------------------

packages/pxweb2-ui/src/lib/components/Select/Select.spec.tsx

@@ -53,23 +53,7 @@ describe('Select', () => {
       expect(labelWrapper).toBeDefined();
     });
 
-    it('should display placeholder when no option is selected', () => {
-      const placeholder = 'Select an option';
-      render(
-        <Select
-          label="Test Select"
-          placeholder={placeholder}
-          options={mockOptions}
-          onChange={mockOnChange}
-          addModal={mockAddModal}
-          removeModal={mockRemoveModal}
-        />,
-      );
-
-      expect(screen.getByText(placeholder)).toBeDefined();
-    });
-
-    it('should display selected option when provided', () => {
+    it('should display selected option when provided', async () => {
       render(
         <Select
           label="Test Select"
@@ -81,10 +65,27 @@ describe('Select', () => {
         />,
       );
 
-      expect(screen.getByText(mockOptions[0].label)).toBeDefined();
+      const option = await screen.findByText(mockOptions[0].label);
+      expect(option).toBeInTheDocument();
     });
   });
 
+  it('should display selected option when provided', () => {
+    render(
+      <Select
+        label="Test Select"
+        options={mockOptions}
+        selectedOption={mockOptions[0]}
+        onChange={mockOnChange}
+        addModal={mockAddModal}
+        removeModal={mockRemoveModal}
+      />,
+    );
+
+    const nativeSelect = screen.getByRole('combobox', { name: /test select/i });
+    expect(nativeSelect).toHaveDisplayValue('Option 1');
+  });
+
   describe('VariableBoxSelect variant', () => {
     const defaultProps = {
       label: 'Test Select',

packages/pxweb2-ui/src/lib/components/Select/Select.tsx

@@ -9,6 +9,7 @@ import { Icon } from '../Icon/Icon';
 import Modal from '../Modal/Modal';
 import Radio from '../Radio/Radio';
 import { getIconDirection } from '../../util/util';
+import i18next from 'i18next';
 
 export type SelectProps = {
   variant?: 'default' | 'inVariableBox';
@@ -62,9 +63,7 @@ export function Select({
           hideLabel={hideLabel}
           label={label}
           options={ops}
-          placeholder={placeholder}
           selectedOption={selectedOption}
-          onChange={onChange}
           tabIndex={tabIndex}
           className={cssClasses}
         />
@@ -96,9 +95,7 @@ type DefaultSelectProps = Pick<
   | 'hideLabel'
   | 'label'
   | 'options'
-  | 'placeholder'
   | 'selectedOption'
-  | 'onChange'
   | 'tabIndex'
   | 'className'
 >;
@@ -107,10 +104,8 @@ function DefaultSelect({
   hideLabel,
   label,
   options,
-  placeholder,
   selectedOption,
-  onChange,
-  tabIndex,
+  tabIndex = 0,
   className = '',
 }: Readonly<DefaultSelectProps>) {
   const cssClasses = className.length > 0 ? ' ' + className : '';
@@ -126,26 +121,30 @@ function DefaultSelect({
           {label}
         </Label>
       </div>
-      <div
-        className={cl(classes.contentStyle)}
-        tabIndex={tabIndex}
-        onClick={() => {
-          openOptions(options); // TODO: Get option
-          onChange(options[0]); // TODO: Use selected option
-        }}
-        onKeyUp={(event) => {
-          if (event.key === ' ' || event.key === 'Enter') {
-            openOptions(options); // TODO: Get option
-            onChange(options[0]); // TODO: Use selected option
+
+      <div className={cl(classes.selectWrapper)}>
+        <select
+          aria-label={label}
+          className={cl(classes.optionLayout, classes['bodyshort-medium'])}
+          defaultValue={
+            selectedOption ? String(selectedOption.value) : undefined
           }
-        }}
-      >
-        <BodyShort
-          size="medium"
-          className={cl(classes.optionLayout, classes.optionTypography)}
         >
-          {selectedOption ? selectedOption.label : placeholder}
-        </BodyShort>
+          {options.map((o) => (
+            <option
+              key={String(o.value)}
+              value={String(o.value)}
+              className={cl(classes['bodyshort-medium'])}
+              tabIndex={tabIndex}
+              // Use uncontrolled select with initial value from selectedOption
+              defaultValue={
+                selectedOption ? String(selectedOption.value) : undefined
+              }
+            >
+              {o.label}
+            </option>
+          ))}
+        </select>
         <Icon iconName="ChevronDown" className={cl(classes.iconColor)}></Icon>
       </div>
     </div>
@@ -310,7 +309,13 @@ function VariableBoxSelect({
             {selectedItem ? selectedItem.label : placeholder}
           </BodyShort>
         </div>
-        <Icon iconName={chevronIcon} className={cl(classes.iconColor)}></Icon>
+        <Icon
+          iconName={chevronIcon}
+          className={cl(
+            classes.iconColor,
+            i18next.dir() === 'rtl' ? classes.rtl : classes.ltr,
+          )}
+        ></Icon>
       </div>
       <div className={cl(classes.divider)}></div>
       {isModalOpen && (