Implement OnyxSelect invalid state

[BoppLi]

Info: this ticket was extracted from

• 570

  because it

Depends on

• 1236

• 567

• 565

• Blocked by #574

Why?

The OnyxSelect should be able to show an invalid state to show the user that the entered value is invalid and he has to perform further actions.

Design

• Figma - select

Acceptance criteria

• the input is shown invalid with a default translated error message if the validation for one of the following properties fails:
  • [x] required
• For each error type (min/max length, pattern missmatch...,
  • [x] a short text summary is displayed below the input
  • [x] with a more detailed text in the tooltip).
• [x] a custom error message can be passed
• [x] inside the alpha-test-app, inside the FormDemoView, include all modified form components from this ticket as examples
• [x] refactor OnyxSelectInput to block forms from submitting while invalid
  • [x] don't use readonly for the native input, but block key inputs
  • [x] make sure to still allow Shift + Tab, Arrow Down (reference the headless composable for the array of opening/closing keys)
  • [x] add a component test to verify manual input does not work.

Definition of Done

• [x] example usage added to alpha-test-app
• [x] covered by component tests
• [x] screenshot tests are updated
• [x] follow-up tickets were created if necessary
• [x] updated version + documentation is deployed
• [x] Storybook can show the feature
• [x] Set task to In Approval

Review

• Required example -> open+close to see error
• Custom Error example -> open+close to see error
• [ ] approved by designer @jannick-ux
• [ ] approved by dev add dev tag

Implementation details

• use :invalid pseudo CSS-selector

[BoppLi]

Daily Notes

• [ ] To solve the form blocking: prevent inputs, hide cursor.