feat(NativeSelect): add focus in readOnly state (#2212)

resolves #1659

Author: Barsnes

.changeset/wise-countries-double.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+NativeSelect: add focus in `readOnly` state

packages/react/src/components/form/NativeSelect/NativeSelect.test.tsx

@@ -83,11 +83,6 @@ describe('NativeSelect', () => {
     expect(screen.getByRole('combobox')).toBeDisabled();
   });
 
-  it('should be disabled when "readOnly" is true', () => {
-    render({ readOnly: true });
-    expect(screen.getByRole('combobox')).toBeDisabled();
-  });
-
   it('Sets the ref on the select element if given', () => {
     const ref = createRef<HTMLSelectElement>();
     render({}, ref);

packages/react/src/components/form/NativeSelect/NativeSelect.tsx

@@ -58,7 +58,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
       selectProps,
       descriptionId,
       errorId,
-      readOnly = false,
+      readOnly,
       size = 'md',
     } = useNativeSelect(props);
 
@@ -105,7 +105,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           )}
           <div className='ds-native-select__wrapper'>
             <select
-              disabled={disabled || readOnly}
+              disabled={disabled}
               ref={ref}
               size={htmlSize}
               className={cl(

packages/react/src/components/form/NativeSelect/useNativeSelect.ts

@@ -1,4 +1,8 @@
-import type { SelectHTMLAttributes } from 'react';
+import type {
+  KeyboardEventHandler,
+  MouseEventHandler,
+  SelectHTMLAttributes,
+} from 'react';
 import { useContext } from 'react';
 
 import { FieldsetContext } from '../Fieldset/FieldsetContext';
@@ -13,7 +17,13 @@ type UseNativeSelect = (props: NativeSelectProps) => Omit<
 > & {
   selectProps: Pick<
     SelectHTMLAttributes<HTMLSelectElement>,
-    'name' | 'required' | 'onClick' | 'onChange' | 'id'
+    | 'name'
+    | 'required'
+    | 'onClick'
+    | 'onChange'
+    | 'id'
+    | 'onKeyDown'
+    | 'onMouseDown'
   >;
 };
 
@@ -22,7 +32,7 @@ export const useNativeSelect: UseNativeSelect = (props) => {
   const fieldset = useContext(FieldsetContext);
   const {
     inputProps: selectProps,
-    readOnly,
+    readOnly = false,
     size = fieldset?.size ?? 'md',
     ...rest
   } = useFormField(props, 'select');
@@ -41,6 +51,22 @@ export const useNativeSelect: UseNativeSelect = (props) => {
         }
         props?.onClick?.(e);
       },
+      onKeyDown: (e) => {
+        if (readOnly) {
+          if (e.key === 'Tab') return;
+          e.preventDefault();
+          return;
+        }
+        props?.onKeyDown?.(e);
+      },
+      onMouseDown: (e) => {
+        if (readOnly) {
+          e.preventDefault();
+          if (e.target instanceof HTMLElement) e.target.focus();
+          return;
+        }
+        props?.onMouseDown?.(e);
+      },
       onChange: (e) => {
         if (readOnly) {
           e.preventDefault();