diff --git a/.github/workflows/cypress-tests.yaml b/.github/workflows/cypress-tests.yaml index c10c029a7..423b14647 100644 --- a/.github/workflows/cypress-tests.yaml +++ b/.github/workflows/cypress-tests.yaml @@ -35,6 +35,13 @@ jobs: config: video=false env: FYLLUT_BACKEND_LOGLEVEL: ${{ runner.debug == '1' && 'debug' || 'error' }} + - name: Upload screenshots + uses: actions/upload-artifact@v4 + if: failure() + with: + name: cypress-screenshots + path: ${{ github.workspace }}/packages/fyllut/cypress/screenshots/* + cypress-run-bygger: runs-on: ubuntu-latest-8-cores diff --git a/packages/bygger/cypress/e2e/form-builder.spec.cy.ts b/packages/bygger/cypress/e2e/form-builder.spec.cy.ts index 2294d1d3e..dbfa4e362 100644 --- a/packages/bygger/cypress/e2e/form-builder.spec.cy.ts +++ b/packages/bygger/cypress/e2e/form-builder.spec.cy.ts @@ -173,8 +173,11 @@ describe('Form Builder', () => { cy.get('[data-testid="editorSaveButton"]').click(); }); + // This error comes from Component.highlightInvalidComponents in Formio it('should show error message stating duplicate API key', () => { - cy.findByText('API Key is not unique: personopplysninger').should('exist'); + // We get one error message on TextField and one from formio in Panel. + // The Panel component uses old templates, that is the reason the error is not correct format. + cy.findAllByText('API Key is not unique: personopplysninger').should('have.length', 2); }); it('should not remove panel when changing components key to something else', () => { diff --git a/packages/bygger/src/formio/builder/WebformBuilder.tsx b/packages/bygger/src/formio/builder/WebformBuilder.tsx index 881f27930..853276c86 100644 --- a/packages/bygger/src/formio/builder/WebformBuilder.tsx +++ b/packages/bygger/src/formio/builder/WebformBuilder.tsx @@ -56,6 +56,8 @@ class WebformBuilder extends NavFormioJs.Builders.builders.webform { super.editComponent(component, parent, isNew, isJsonEdit, original, flags); + this.editForm.editFormDialog = true; + if (isJsonEdit) { this.editForm.form = { ...this.editForm.form, diff --git a/packages/bygger/src/formio/builder/WizardBuilder.tsx b/packages/bygger/src/formio/builder/WizardBuilder.tsx index 8c7f33ff1..d8b0f6a96 100644 --- a/packages/bygger/src/formio/builder/WizardBuilder.tsx +++ b/packages/bygger/src/formio/builder/WizardBuilder.tsx @@ -87,6 +87,8 @@ class WizardBuilder extends NavFormioJs.Builders.builders.wizard { super.editComponent(component, parent, isNew, isJsonEdit, original, flags); + this.editForm.editFormDialog = true; + if (isJsonEdit) { this.editForm.form = { ...this.editForm.form, diff --git a/packages/fyllut/cypress/e2e/components/datagrid.cy.ts b/packages/fyllut/cypress/e2e/components/datagrid.cy.ts index 3ae12108b..c0901232b 100644 --- a/packages/fyllut/cypress/e2e/components/datagrid.cy.ts +++ b/packages/fyllut/cypress/e2e/components/datagrid.cy.ts @@ -23,6 +23,7 @@ describe('Datagrid', () => { cy.visit('/fyllut/datagridReact?sub=digital'); cy.defaultWaits(); cy.clickStart(); + cy.wait('@createMellomlagring'); cy.findByRole('checkbox', { name: 'Avkryssingsboks inni datagrid (valgfritt)' }).check(); cy.findByRole('textbox', { name: 'Dato inni datagrid' }).type('15.01.2022'); cy.findByRole('combobox', { name: 'Nedtrekksmeny inni datagrid' }).type('F{enter}'); @@ -30,6 +31,7 @@ describe('Datagrid', () => { cy.findByRole('textbox', { name: 'Tekstområde inni datagrid' }).type('Lorem Ipsum'); cy.findByRole('textbox', { name: 'Tekstfelt inni datagrid' }).type('Hund'); cy.clickSaveAndContinue(); + cy.wait('@updateMellomlagring'); cy.findByRoleWhenAttached('heading', { level: 2, name: 'Oppsummering' }).should('exist'); cy.findByRoleWhenAttached('link', { name: TEXTS.grensesnitt.summaryPage.editAnswers }).should('exist').click(); diff --git a/packages/fyllut/cypress/e2e/components/driving-list.cy.ts b/packages/fyllut/cypress/e2e/components/driving-list.cy.ts index d8d9f3411..f9ec9d608 100644 --- a/packages/fyllut/cypress/e2e/components/driving-list.cy.ts +++ b/packages/fyllut/cypress/e2e/components/driving-list.cy.ts @@ -20,54 +20,9 @@ describe('DrivingList', () => { cy.configMocksServer(); }); - beforeEach(() => { - cy.defaultIntercepts(); - cy.defaultInterceptsMellomlagring(); - cy.defaultInterceptsExternal(); - cy.mocksRestoreRouteVariants(); - }); - - after(() => { - cy.mocksRestoreRouteVariants(); - }); - describe('paper', () => { - it('should fill out form and show data in summary', () => { - cy.visit(`/fyllut/testdrivinglist?sub=paper`); - cy.defaultWaits(); - cy.clickStart(); - - cy.findByRole('textbox', { name: DATE_PICKER_LABEL }).should('exist').type('15.05.2023{esc}'); - cy.findByRole('group', { name: PARKING_LABEL }) - .should('exist') - .within(() => { - cy.findAllByRole('radio').should('have.length', 2); - cy.findByRole('radio', { name: 'Ja' }).should('exist').check(); - }); - - cy.findByRole('button', { name: '15. mai 2023 - 21. mai 2023' }).click(); - - cy.findByRole('group', { name: DAY_PICKER_LABEL_WITH_PARKING }) - .should('exist') - .within(() => { - cy.findAllByRole('checkbox').should('have.length', 7); - cy.findByRole('checkbox', { name: 'mandag 15. mai 2023' }).should('exist').check(); - cy.findByRole('checkbox', { name: 'søndag 21. mai 2023' }).should('exist').check(); - cy.findAllByRole('textbox', { name: PARKING_EXPENSES_LABEL }).eq(0).should('exist').type('100'); - }); - - cy.clickNextStep(); - - // Summary - cy.get('dl') - .first() - .within(() => { - cy.get('dt').eq(0).should('contain.text', 'Legg til kjøreliste for en eller flere perioder'); - - cy.findAllByRole('listitem').should('have.length', 2); - cy.findByText('mandag 15. mai 2023, parkeringsutgift: 100 kr').should('exist'); - cy.findByText('søndag 21. mai 2023').should('exist'); - }); + beforeEach(() => { + cy.defaultIntercepts(); }); it('should show errors', () => { @@ -76,9 +31,13 @@ describe('DrivingList', () => { cy.clickStart(); // Should fill out form + cy.findByRole('textbox', { name: DATE_PICKER_LABEL }).should('exist'); + cy.findByRole('group', { name: 'Skal du registrere parkering?' }).should('exist'); cy.clickNextStep(); - cy.get('[data-cy=error-summary]') + + cy.findByRole('heading', { name: 'For å gå videre må du rette opp følgende:' }) .should('exist') + .parent() .within(() => { cy.findByRole('link', { name: `Du må fylle ut: ${DATE_PICKER_LABEL}` }) .should('exist') @@ -94,8 +53,9 @@ describe('DrivingList', () => { cy.findByRole('textbox', { name: PARKING_EXPENSES_LABEL }).clear(); cy.findByRole('textbox', { name: PARKING_EXPENSES_LABEL }).type('text'); cy.clickNextStep(); - cy.get('[data-cy=error-summary]') + cy.findByRole('heading', { name: 'For å gå videre må du rette opp følgende:' }) .should('exist') + .parent() .within(() => { cy.findByRole('link', { name: 'Parkeringsutgiftene for 15.05.2023 må være et gyldig beløp' }) .should('exist') @@ -103,7 +63,7 @@ describe('DrivingList', () => { }); cy.findByRole('textbox', { name: PARKING_EXPENSES_LABEL }).should('have.focus').type('{selectall}78'); - cy.get('[data-cy=error-summary]').should('not.exist'); + cy.findByRole('heading', { name: 'For å gå videre må du rette opp følgende:' }).should('not.exist'); // Parking expenses should not show even with value over 100 cy.findByRole('textbox', { name: PARKING_EXPENSES_LABEL }).should('exist').type('101'); @@ -111,6 +71,44 @@ describe('DrivingList', () => { cy.findByRole('heading', { name: 'Oppsummering' }).should('exist'); }); + it('should fill out form and show data in summary', () => { + cy.visit(`/fyllut/testdrivinglist?sub=paper`); + cy.defaultWaits(); + cy.clickStart(); + + cy.findByRole('textbox', { name: DATE_PICKER_LABEL }).should('exist').type('15.05.2023{esc}'); + cy.findByRole('group', { name: PARKING_LABEL }) + .should('exist') + .within(() => { + cy.findAllByRole('radio').should('have.length', 2); + cy.findByRole('radio', { name: 'Ja' }).should('exist').check(); + }); + + cy.findByRole('button', { name: '15. mai 2023 - 21. mai 2023' }).click(); + + cy.findByRole('group', { name: DAY_PICKER_LABEL_WITH_PARKING }) + .should('exist') + .within(() => { + cy.findAllByRole('checkbox').should('have.length', 7); + cy.findByRole('checkbox', { name: 'mandag 15. mai 2023' }).should('exist').check(); + cy.findByRole('checkbox', { name: 'søndag 21. mai 2023' }).should('exist').check(); + cy.findAllByRole('textbox', { name: PARKING_EXPENSES_LABEL }).eq(0).should('exist').type('100'); + }); + + cy.clickNextStep(); + + // Summary + cy.get('dl') + .first() + .within(() => { + cy.get('dt').eq(0).should('contain.text', 'Legg til kjøreliste for en eller flere perioder'); + + cy.findAllByRole('listitem').should('have.length', 2); + cy.findByText('mandag 15. mai 2023, parkeringsutgift: 100 kr').should('exist'); + cy.findByText('søndag 21. mai 2023').should('exist'); + }); + }); + it('should add and remove periods', () => { cy.visit(`/fyllut/testdrivinglist?sub=paper`); cy.defaultWaits(); @@ -137,11 +135,19 @@ describe('DrivingList', () => { }); describe('digital', () => { + beforeEach(() => { + cy.mocksRestoreRouteVariants(); + cy.defaultInterceptsMellomlagring(); + cy.defaultInterceptsExternal(); + cy.defaultIntercepts(); + }); + it('should fill out form and show data in summary', () => { cy.visit(`/fyllut/testdrivinglist?sub=digital`); cy.defaultWaits(); cy.clickStart(); cy.wait('@getActivities'); + cy.wait('@createMellomlagring'); cy.findByRole('group', { name: ACTIVITIES_LABEL }) .should('exist') @@ -201,10 +207,11 @@ describe('DrivingList', () => { }); it('should fill out mellomlagret values', () => { - cy.visit(`/fyllut/testdrivinglist/veiledning?sub=digital&innsendingsId=8495201b-71fd-4a95-82f8-d224d32237e5`); cy.mocksUseRouteVariant('get-soknad:success-driving-list'); + cy.visit(`/fyllut/testdrivinglist/veiledning?sub=digital&innsendingsId=8495201b-71fd-4a95-82f8-d224d32237e5`); cy.defaultWaits(); cy.wait('@getActivities'); + cy.wait('@getMellomlagring'); cy.findByRole('radio', { name: 'Arbeidstrening: 01. januar 2024 - 31. august 2024' }).should('be.checked'); @@ -220,10 +227,11 @@ describe('DrivingList', () => { }); it('should load driving list without dates', () => { - cy.visit(`/fyllut/testdrivinglist/veiledning?sub=digital&innsendingsId=a66e8932-ce2a-41c1-932b-716fc487813b`); cy.mocksUseRouteVariant('get-soknad:success-driving-list-no-dates'); + cy.visit(`/fyllut/testdrivinglist/veiledning?sub=digital&innsendingsId=a66e8932-ce2a-41c1-932b-716fc487813b`); cy.defaultWaits(); cy.wait('@getActivities'); + cy.wait('@getMellomlagring'); cy.findByRole('radio', { name: 'Arbeidstrening: 01. januar 2024 - 31. august 2024' }).should('be.checked'); @@ -241,6 +249,7 @@ describe('DrivingList', () => { cy.visit(`/fyllut/testdrivinglist/veiledning?sub=digital`); cy.defaultWaits(); cy.wait('@getActivities'); + cy.wait('@createMellomlagring'); cy.findByRole('radio', { name: 'Arbeidstrening: 01. januar 2099 - 31. august 2099' }).check(); @@ -260,6 +269,7 @@ describe('DrivingList', () => { cy.clickStart(); cy.wait('@getActivities'); + cy.wait('@createMellomlagring'); cy.clickSaveAndContinue(); cy.get('[data-cy=error-summary]') @@ -295,11 +305,12 @@ describe('DrivingList', () => { }); it('should render alert when there are no activities and error when trying to continue', () => { + cy.mocksUseRouteVariant('get-activities:success-empty'); cy.visit(`/fyllut/testdrivinglist?sub=digital`); cy.defaultWaits(); - cy.mocksUseRouteVariant('get-activities:success-empty'); cy.clickStart(); cy.wait('@getActivities'); + cy.wait('@createMellomlagring'); cy.get('.navds-alert').within(() => { cy.findByText(TEXTS.statiske.drivingList.noVedtakHeading).should('exist'); diff --git a/packages/fyllut/cypress/e2e/components/general.cy.ts b/packages/fyllut/cypress/e2e/components/general.cy.ts index 8d6cf9855..1b14494df 100644 --- a/packages/fyllut/cypress/e2e/components/general.cy.ts +++ b/packages/fyllut/cypress/e2e/components/general.cy.ts @@ -33,7 +33,7 @@ describe('React components', () => { cy.findAllByText('Du må fylle ut: Velg valuta').should('have.length', 2); cy.findAllByText('Du må fylle ut: Velg valuta').first().click(); - cy.findByRole('combobox', { name: 'Velg valuta' }).should('have.focus').type('{upArrow}{enter}'); + cy.findByRole('combobox', { name: 'Velg valuta' }).type('{upArrow}{enter}'); cy.clickNextStep(); cy.findByRole('heading', { name: 'Vedlegg' }).should('exist'); diff --git a/packages/shared-components/src/components/address/fields/AddressTextField.tsx b/packages/shared-components/src/components/address/fields/AddressTextField.tsx index 89c000968..9062ecb4d 100644 --- a/packages/shared-components/src/components/address/fields/AddressTextField.tsx +++ b/packages/shared-components/src/components/address/fields/AddressTextField.tsx @@ -15,7 +15,7 @@ interface Props { const AddressTextField = ({ type, label, value, required = false, children, autoComplete }: Props) => { const { onChange, readOnly, className } = useAddress(); - const { translate, addRef, getComponentError } = useComponentUtils(); + const { translate, addRef, getComponentError, focusHandler, blurHandler } = useComponentUtils(); const translateLabel = (text: string) => { return required || readOnly ? translate(text) : `${translate(text)} (${translate('valgfritt')})`; @@ -31,6 +31,8 @@ const AddressTextField = ({ type, label, value, required = false, children, auto onChange={(event) => onChange(type, event.currentTarget.value)} defaultValue={value} label={translateLabel(label)} + onFocus={focusHandler(`address:${type}`)} + onBlur={blurHandler(`address:${type}`)} ref={(ref) => addRef(`address:${type}`, ref)} error={getComponentError(`address:${type}`)} readOnly={readOnly} diff --git a/packages/shared-components/src/formio/components/base/BaseComponent.ts b/packages/shared-components/src/formio/components/base/BaseComponent.ts index 4f9b080c0..22d0b7941 100644 --- a/packages/shared-components/src/formio/components/base/BaseComponent.ts +++ b/packages/shared-components/src/formio/components/base/BaseComponent.ts @@ -150,13 +150,6 @@ class BaseComponent extends FormioReactComponent { return this.component?.customLabels; } - /** - * Get error custom for component renderReact() - */ - getError() { - return this.error?.message; - } - /** * Get whether user is logged in or not for custom component renderReact() */ @@ -200,11 +193,37 @@ class BaseComponent extends FormioReactComponent { return (this.isSubmissionDigital() && !!this.component?.prefillKey && !!this.component?.prefillValue) ?? false; } - // elementId is used to focus to the correct element when clicking on error summary - // Message is the error message that is shown in the error summary + /** + * elementId is used to focus to the correct element when clicking on error summary + * Message is the error message that is shown in the error summary + */ addError(message: string, elementId?: string) { - this.logger.debug('addError', { errorMessage: message }); - this.componentErrors.push(this.createError(message, elementId)); + if (this.showErrorMessages()) { + this.logger.debug('addError', { errorMessage: message }); + this.componentErrors.push(this.createError(message, elementId)); + } + } + + get errors() { + return this.componentErrors; + } + + override setCustomValidity(messages: string | ComponentError[], _dirty?: boolean, _external?: boolean) { + this.removeAllErrors(); + + if (messages) { + if (Array.isArray(messages)) { + if (messages.length > 1) { + this.logger.info(`Should never get more then one message, got ${messages.length}.`, { messages }); + } + messages.forEach((componentError: ComponentError) => { + this.addError(componentError.message, this.getId()); + }); + } else { + this.addError(messages, this.getId()); + } + } + this.rerender(); } createError(message: string, elementId?: string): ComponentError { @@ -220,9 +239,25 @@ class BaseComponent extends FormioReactComponent { this.componentErrors = []; } + getError() { + return this.getComponentError(this.getId()); + } + getComponentError(elementId: string) { return this.componentErrors.find((error) => error.elementId === elementId)?.message; } + + /** + * nextPageClicked: When user click next page in Fyllut (except last page) + * submitted: When user click next page in Fyllut (last page) + * builderMode: When user is in the regular form builder + * editFormDialog: When user have open a form dialog in the form builder + */ + showErrorMessages() { + return ( + this.root.currentPage?.nextPageClicked || this.root.submitted || this.builderMode || this.root.editFormDialog + ); + } } export default BaseComponent; diff --git a/packages/shared-components/src/formio/components/base/FormioReactComponent.tsx b/packages/shared-components/src/formio/components/base/FormioReactComponent.tsx index 5cd421107..c6352f571 100644 --- a/packages/shared-components/src/formio/components/base/FormioReactComponent.tsx +++ b/packages/shared-components/src/formio/components/base/FormioReactComponent.tsx @@ -2,6 +2,7 @@ import { ReactComponent } from '@formio/react'; import { ComponentError, SubmissionData } from '@navikt/skjemadigitalisering-shared-domain'; import { createRoot } from 'react-dom/client'; import Ready from '../../../util/form/ready'; +import baseComponentUtils from './baseComponentUtils'; import createComponentLogger, { ComponentLogger } from './createComponentLogger'; import { blurHandler, focusHandler } from './focus-helpers'; import { IReactComponent } from './index'; @@ -36,6 +37,8 @@ class FormioReactComponent extends (ReactComponent as unknown as IReactComponent } setReactInstance(element, autoResolve: boolean = true) { + this.addRef(baseComponentUtils.getId(this.component), element); + this.reactInstance = element; this.addFocusBlurEvents(element); if (autoResolve) { @@ -148,26 +151,11 @@ class FormioReactComponent extends (ReactComponent as unknown as IReactComponent /** * Add message render the error messages Form.io template. - * - * If the component have error message suppport, we would like to use that instead of the template in Form.io. */ addMessages(messages) { - // TODO: Fjern dette når navSelect bruker komponent fra aksel, og error kan håndteres direkte av komponenten. - // Behold addMessages som en tom funksjon - if (['navSelect', 'valutavelger'].includes(this.component?.type ?? '')) { - super.addMessages(messages); - } - } - - /** - * Set error - */ - override setCustomValidity(messages: string | string[], dirty?: boolean, external?: boolean) { - const previousErrorMessage = this.error?.message; - super.setCustomValidity(messages, dirty, external); - if (this.error?.message !== previousErrorMessage) { - this.rerender(); - } + this.logger.info('Trying to addMessages with Formio.io old template. Should use new error messages instead', { + messages, + }); } /** diff --git a/packages/shared-components/src/formio/components/base/index.d.ts b/packages/shared-components/src/formio/components/base/index.d.ts index 920f43d5a..81be0a3b7 100644 --- a/packages/shared-components/src/formio/components/base/index.d.ts +++ b/packages/shared-components/src/formio/components/base/index.d.ts @@ -1,4 +1,4 @@ -import { Component, FormPropertiesType, NavFormType } from '@navikt/skjemadigitalisering-shared-domain'; +import { Component, ComponentError, FormPropertiesType, NavFormType } from '@navikt/skjemadigitalisering-shared-domain'; import Select from 'react-select/base'; import { AppConfigContextType } from '../../../context/config/configContext'; interface IReactComponent { @@ -45,6 +45,7 @@ interface ReactComponentType { visible: any | boolean; hideLabel: boolean; dirty: boolean; + pristine: boolean; error?: { message: string; } | null; @@ -73,7 +74,7 @@ interface ReactComponentType { addMessages(messages): void; addFocusBlurEvents(element): void; labelIsHidden(): boolean; - setCustomValidity(messages: string | string[], dirty?: boolean, external?: boolean): void; + setCustomValidity(messages: string | string[] | ComponentError[], dirty?: boolean, external?: boolean): void; isEmpty(value?: any): boolean; // Element id?: any; diff --git a/packages/shared-components/src/formio/components/core/address/Address.tsx b/packages/shared-components/src/formio/components/core/address/Address.tsx index 6ea6664b8..e4747cbdd 100644 --- a/packages/shared-components/src/formio/components/core/address/Address.tsx +++ b/packages/shared-components/src/formio/components/core/address/Address.tsx @@ -140,11 +140,7 @@ class Address extends BaseComponent { } } - get errors() { - return this.componentErrors; - } - - checkValidity(data, dirty, row) { + checkComponentValidity(data, dirty, row, _options = {}) { this.removeAllErrors(); if (this.shouldSkipValidation(data, dirty, row) || this.getReadOnly()) { diff --git a/packages/shared-components/src/formio/components/core/driving-list/DrivingList.tsx b/packages/shared-components/src/formio/components/core/driving-list/DrivingList.tsx index 19b505619..98ff26af4 100644 --- a/packages/shared-components/src/formio/components/core/driving-list/DrivingList.tsx +++ b/packages/shared-components/src/formio/components/core/driving-list/DrivingList.tsx @@ -34,16 +34,7 @@ class DrivingList extends BaseComponent { onValueChange(value) { super.handleChange(value); - - // If next button has been clicked (submitted), check the whole form for errors - if (this.root.submitted) { - this.checkValidity(); - } else { - this.rerender(); - } - } - override get errors() { - return this.componentErrors; + this.rerender(); } addErrorOfType(metadataId: DrivingListMetadataId, errorType: DrivingListErrorType) { @@ -52,8 +43,13 @@ class DrivingList extends BaseComponent { } } - override checkValidity(): boolean { + checkComponentValidity(data, dirty, row, _options = {}) { this.removeAllErrors(); + + if (this.shouldSkipValidation(data, dirty, row)) { + return true; + } + const componentData = this.getValue() as DrivingListSubmission; if (this.isSubmissionPaper()) { @@ -95,11 +91,7 @@ class DrivingList extends BaseComponent { this.rerender(); - if (this.componentErrors.length > 0) { - return false; - } - - return true; + return this.componentErrors.length === 0; } updateValues(multipleValues: DrivingListValues) { @@ -107,7 +99,7 @@ class DrivingList extends BaseComponent { } renderReact(element) { - // TODO: Delete DrivingListProvider and use prop drilling instead + // TODO: Delete DrivingListProvider and use prop drilling instead. element.render( diff --git a/packages/shared-components/src/formio/components/core/driving-list/DrivingList.utils.ts b/packages/shared-components/src/formio/components/core/driving-list/DrivingList.utils.ts index 97de2d807..7347f4788 100644 --- a/packages/shared-components/src/formio/components/core/driving-list/DrivingList.utils.ts +++ b/packages/shared-components/src/formio/components/core/driving-list/DrivingList.utils.ts @@ -66,5 +66,5 @@ export const showAddButton = (values?: DrivingListSubmission) => { }; export const showRemoveButton = (values?: DrivingListSubmission) => { - return values?.periods?.length && values?.periods?.length > 1; + return values?.periods?.length ? values?.periods?.length > 1 : false; }; diff --git a/packages/shared-components/src/formio/components/core/select/Select.test.tsx b/packages/shared-components/src/formio/components/core/select/Select.test.tsx index 732be7257..f87067818 100644 --- a/packages/shared-components/src/formio/components/core/select/Select.test.tsx +++ b/packages/shared-components/src/formio/components/core/select/Select.test.tsx @@ -119,7 +119,7 @@ describe('NavSelect', () => { const nextButton = screen.getByRole('button', { name: 'Neste steg' }); expect(nextButton).toBeInTheDocument(); - nextButton.click(); + await userEvent.click(nextButton); const errorMessages = await screen.findAllByText('Du må fylle ut: Velg frukt'); expect(errorMessages).toHaveLength(1); // nedenfor input-feltet diff --git a/packages/shared-components/src/formio/components/core/select/Select.tsx b/packages/shared-components/src/formio/components/core/select/Select.tsx index a7fd73ca2..d860e09e7 100644 --- a/packages/shared-components/src/formio/components/core/select/Select.tsx +++ b/packages/shared-components/src/formio/components/core/select/Select.tsx @@ -1,7 +1,7 @@ import { TEXTS } from '@navikt/skjemadigitalisering-shared-domain'; import { Utils } from 'formiojs'; -import { useEffect, useRef, useState } from 'react'; -import ReactSelect, { OnChangeValue, components } from 'react-select'; +import { useEffect, useState } from 'react'; +import ReactSelect, { components, OnChangeValue } from 'react-select'; import Select from 'react-select/base'; import http from '../../../../api/util/http/http'; import BaseComponent from '../../base/BaseComponent'; @@ -49,11 +49,6 @@ const ReactSelectWrapper = ({ useEffect(() => { setSelectedOption(value); }, [value, options]); - const ref = useRef