fix: Simplify autocomplete input for V3 (#14262)

Co-authored-by: andreastanderen <[email protected]>

frontend/libs/studio-components/src/components/StudioNativeSelect/StudioNativeSelect.tsx

@@ -1,7 +1,9 @@
 import React, { forwardRef, useId } from 'react';
 import { NativeSelect, type NativeSelectProps } from '@digdir/designsystemet-react';
 
-export const StudioNativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
+export type StudioNativeSelectProps = NativeSelectProps;
+
+export const StudioNativeSelect = forwardRef<HTMLSelectElement, StudioNativeSelectProps>(
   ({ children, description, label, id, size, ...rest }, ref): React.JSX.Element => {
     const defaultId = useId();
     id = id ?? defaultId;

frontend/libs/studio-components/src/components/StudioNativeSelect/index.ts

@@ -1 +1 @@
-export { StudioNativeSelect } from './StudioNativeSelect';
+export * from './StudioNativeSelect';

frontend/packages/ux-editor-v3/src/components/config/EditFormComponent.test.tsx

@@ -95,8 +95,11 @@ describe('EditFormComponent', () => {
     Object.keys(labels).map(async (label) =>
       expect(await screen.findByRole(labels[label], { name: textMock(label) })),
     );
-    expect(screen.getByRole('combobox'));
-    expect(screen.getByLabelText('Autocomplete (WCAG)'));
+    expect(
+      screen.getByRole('combobox', {
+        name: textMock('ux_editor.component_properties.autocomplete'),
+      }),
+    ).toBeInTheDocument();
   });
 
   it('should return header specific content when type header', async () => {

frontend/packages/ux-editor-v3/src/components/config/componentConfig.tsx

@@ -7,7 +7,7 @@ import { EditOptions } from './editModal/EditOptions';
 import { EditPreselectedIndex } from './editModal/EditPreselectedIndex';
 import { EditReadOnly } from './editModal/EditReadOnly';
 import { EditRequired } from './editModal/EditRequired';
-import { EditAutoComplete } from './editModal/EditAutoComplete';
+import { EditAutocomplete } from './editModal/EditAutocomplete';
 import { EditTextResourceBinding } from './editModal/EditTextResourceBinding';
 import type { FormComponent } from '../../types/FormComponent';
 
@@ -121,7 +121,7 @@ export const configComponents: IConfigComponents = {
   [EditSettings.Options]: EditOptions,
   [EditSettings.CodeList]: EditCodeList,
   [EditSettings.PreselectedIndex]: EditPreselectedIndex,
-  [EditSettings.AutoComplete]: EditAutoComplete,
+  [EditSettings.AutoComplete]: EditAutocomplete,
   [EditSettings.Help]: ({ component, handleComponentChange }: IGenericEditComponent) => (
     <EditTextResourceBinding
       component={component}

frontend/packages/ux-editor-v3/src/components/config/editModal/EditAutocomplete/EditAutocomplete.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { EditAutocompleteProps } from './';
+import { EditAutocomplete } from './';
+import type { RenderResult } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ComponentTypeV3 } from 'app-shared/types/ComponentTypeV3';
+import type { FormComponent } from '../../../../types/FormComponent';
+import { renderWithProviders } from '../../../../testing/mocks';
+
+// Test data:
+const component: FormComponent<ComponentTypeV3.Input> = {
+  id: 'random-id',
+  autocomplete: '',
+  type: ComponentTypeV3.Input,
+  itemType: 'COMPONENT',
+  propertyPath: 'definitions/inputComponent',
+  dataModelBindings: {},
+};
+const handleComponentChange = jest.fn();
+const defaultProps: EditAutocompleteProps = {
+  handleComponentChange,
+  component,
+};
+
+describe('EditAutocomplete', () => {
+  it('Calls handleComponentChange with the updated component when the value is changed ', async () => {
+    const user = userEvent.setup();
+    const optionToChoose = 'on';
+    renderEditAutocomplete();
+
+    const combobox = screen.getByRole('combobox');
+    const option = screen.getByRole('option', { name: optionToChoose });
+    await user.selectOptions(combobox, option);
+
+    expect(handleComponentChange).toHaveBeenCalledWith({
+      autocomplete: optionToChoose,
+      dataModelBindings: {},
+      id: 'random-id',
+      itemType: 'COMPONENT',
+      propertyPath: 'definitions/inputComponent',
+      type: 'Input',
+    });
+  });
+
+  it('Renders with the given autocomplete value as selected', () => {
+    const selectedValue = 'on';
+    const componentWithAutocomplete: FormComponent<ComponentTypeV3.Input> = {
+      ...component,
+      autocomplete: selectedValue,
+    };
+    renderEditAutocomplete({ component: componentWithAutocomplete });
+    expect(screen.getByRole('combobox')).toHaveValue(selectedValue);
+  });
+});
+
+function renderEditAutocomplete(props: Partial<EditAutocompleteProps> = {}): RenderResult {
+  return renderWithProviders(<EditAutocomplete {...defaultProps} {...props} />);
+}