fix: selectbox missing required name

[jzfrank]

Description Add name and required props to Select, MultiSelect, SearchSelect components.

This is for consistency, for users who stick with form to submit data.

Currently, the fix is W.I.P., as it has not replicated the effect of native input's required behavior: i.e. preventing form from submitting if required input element is not filled.

Related issue(s)

• Closes #366

What kind of change does this PR introduce? (check at least one)

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New Feature (non-breaking change which adds functionality)
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [x] No

If yes, please describe the impact and migration path for existing applications:

How has This been tested? In Storybook SelectWithForm, MultiSelectWithForm, SearchSelectWithForm. After selecting, click submit, it will open a page that the form requests.

Screenshots (if appropriate): e.g. MultiSelect form

After clicking submit ->

The PR fulfills these requirements:

• [x] It's submitted to the main branch
• [x] When resolving a specific issue, it's referenced in the related issue section above
• [x] My change requires a change to the documentation. (Managed by Tremor Team)
• [ ] I have added tests to cover my changes
• [x] Check the "Allow edits from maintainers" option while creating your PR.
• [x] Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.
• [x] By contributing to Tremor, you confirm that you have read and agreed to Tremor's CONTRIBUTING.md guideline. You also agree that your contributions will be licensed under the Apache License 2.0 license.

[christopherkindl]

Hi @jzfrank, works great - just tested the submission also with a third party form service and works fine. The only thing missing now would be error and errorMessage as used in other input elements.

Thanks for the great work again!

[jzfrank]

Just checked @mbauchet edits, it seems that the form warning when no element selected is solved. Thanks and clever trick!

@christopherkindl @severinlandolt Regarding the error and errorMessage, can you elaborate why we need these fields for a Select element and use scenarios? Thanks :)

[christopherkindl]

@jzfrank If those components are used in a form context, which is common for form elements. E.g. "make a selection to continue with the process"

[jzfrank]

@christopherkindl I think I get the point, but not sure if completely. From my understanding, now we support:

• when used in form submission, a non-selection on required=true select element will render a warning, just like native html input element. (thanks @mbauchet again for the clever trick of hiding a select).
• we also give user freedom to specify error and errorMessage, so user could trigger error display in other cases, e.g. we have a min select input and a max select input, user might want to give an error message if selected max is less than selected min.

Based on that interpretation, I just added error and errorMessage, similar to what we do for BaseInput. Let me know if they are as expected :)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tremor-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 23, 2024 3:34am

[severinlandolt]

@jzfrank Congrats, the PR is now in beta!

[github-actions[bot]]

:tada: This PR is included in version 3.13.2-beta-select.1 :tada:

The release is available on:

• npm package (@beta-select dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This PR is included in version 3.13.4-beta-select.1 :tada:

The release is available on:

• npm package (@beta-select dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: