search

codegouvfr / react-dsfr

🇫🇷 The French Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
407 stars 51 forks source link

The select error state is not displaying the error message correctly #62

Closed jdirand closed 1 year ago

jdirand commented 1 year ago

I am using the Select component in 2 projects and I have an issue with the error state : the error message is showing as a valid message (green with the check icon)

image

When I inspect the error message, the paragraph has 2 classes (fr-valid-text fr-error-text).

I am using the code from the story : https://react-dsfr-components.etalab.studio/iframe.html?viewMode=docs&id=components-select--error-state&args=#error-state

enguerranws commented 1 year ago

Can you provide the props you are giving to the Select component?

jdirand commented 1 year ago

I have copied the example from the storybook, the props are these one:

  label="Label pour liste déroulante"
  nativeSelectProps={{}}
  state="error"
  stateRelatedMessage="Texte d’erreur obligatoire"
garronej commented 1 year ago

The storybook is the actual lib running, the code when you copy the code you're getting the actuall code that generates what you see in the storybook.

The answer is to update @codegouv/react-dsfr to the latest version.

Please let us know if your problem isn't solved.

Best regads

enguerranws commented 1 year ago

Just tested it on a fresh Vite project, but I couldn't reproduce this behavior.

@jdirand I would also suggest to update to the latest version of react-dsfr.

jdirand commented 1 year ago

Thanks guys, working fine with the latest version!