Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Make the isRequired prop forward to the internal required prop #288

Merged
merged 1 commit into from
Oct 11, 2023

Conversation

csandman
Copy link
Owner

@csandman csandman commented Oct 11, 2023

Closes #263

This PR implements the isRequired prop from the form control (or the one passed directly to the component), forwarding it to the internal required prop on the internal React Select component. This get's forwarded down to a hidden input which also receives the name prop for use with built in form validation.

This prop will be overridden if you pass required to the select component directly, similar to how this works with the original react select.

Here is the example used in the original issue: https://codesandbox.io/s/prod-browser-17s6f4 (see below for the generated CodeSandbox with this fix implemented).


EDIT: Here is the rendered HTML of the hidden input from the original CodeSandbox example:

<input required="" name="chakra-select" tabindex="-1" class="css-5kkxb2-requiredInput-RequiredInput" value="">

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9b05608:

Sandbox Source
chakra-react-select demo Configuration
chakra-react-select TS demo Configuration
chakra-react-select + next.js Configuration
chakra-react-select + next.js + typescript Configuration
objective-snowflake-wmdp4w PR
patient-glitter-3zfqds Issue #263

@github-actions
Copy link

📊 Package size report   0.1%↑

File Before After
dist/cjs/use-chakra-select-props.js 5.0 kB 2%↑5.1 kB
dist/cjs/use-chakra-select-props.js.map 7.9 kB 2%↑8.0 kB
dist/esm/use-chakra-select-props.js 4.7 kB 2%↑4.8 kB
dist/esm/use-chakra-select-props.js.map 6.8 kB 2%↑7.0 kB
dist/types/use-chakra-select-props.d.ts 564 B 2%↑574 B
Total (Includes all files) 420.4 kB 0.1%↑421.0 kB
Tarball size 70.2 kB 0.1%↑70.3 kB
Unchanged files
File Size
dist/cjs/chakra-components/containers.js 4.0 kB
dist/cjs/chakra-components/containers.js.map 8.1 kB
dist/cjs/chakra-components/control.js 10.3 kB
dist/cjs/chakra-components/control.js.map 19.1 kB
dist/cjs/chakra-components/index.js 2.7 kB
dist/cjs/chakra-components/index.js.map 3.8 kB
dist/cjs/chakra-components/input.js 3.5 kB
dist/cjs/chakra-components/input.js.map 6.5 kB
dist/cjs/chakra-components/menu.js 11.7 kB
dist/cjs/chakra-components/menu.js.map 22.8 kB
dist/cjs/chakra-components/multi-value.js 6.3 kB
dist/cjs/chakra-components/multi-value.js.map 13.1 kB
dist/cjs/chakra-components/placeholder.js 1.4 kB
dist/cjs/chakra-components/placeholder.js.map 2.8 kB
dist/cjs/chakra-components/single-value.js 1.5 kB
dist/cjs/chakra-components/single-value.js.map 3.0 kB
dist/cjs/index.js 2.0 kB
dist/cjs/index.js.map 2.9 kB
dist/cjs/module-augmentation.js 61 B
dist/cjs/module-augmentation.js.map 10.3 kB
dist/cjs/select/async-creatable-select.js 2.3 kB
dist/cjs/select/async-creatable-select.js.map 3.8 kB
dist/cjs/select/async-select.js 2.2 kB
dist/cjs/select/async-select.js.map 3.6 kB
dist/cjs/select/creatable-select.js 2.3 kB
dist/cjs/select/creatable-select.js.map 3.7 kB
dist/cjs/select/select.js 2.2 kB
dist/cjs/select/select.js.map 3.5 kB
dist/cjs/types.js 47 B
dist/cjs/types.js.map 3.7 kB
dist/cjs/utils.js 3.1 kB
dist/cjs/utils.js.map 5.6 kB
dist/esm/chakra-components/containers.js 3.6 kB
dist/esm/chakra-components/containers.js.map 7.4 kB
dist/esm/chakra-components/control.js 9.6 kB
dist/esm/chakra-components/control.js.map 17.8 kB
dist/esm/chakra-components/index.js 1.3 kB
dist/esm/chakra-components/index.js.map 2.5 kB
dist/esm/chakra-components/input.js 3.2 kB
dist/esm/chakra-components/input.js.map 5.4 kB
dist/esm/chakra-components/menu.js 10.9 kB
dist/esm/chakra-components/menu.js.map 21.9 kB
dist/esm/chakra-components/multi-value.js 5.9 kB
dist/esm/chakra-components/multi-value.js.map 12.3 kB
dist/esm/chakra-components/placeholder.js 1.1 kB
dist/esm/chakra-components/placeholder.js.map 2.1 kB
dist/esm/chakra-components/single-value.js 1.2 kB
dist/esm/chakra-components/single-value.js.map 2.3 kB
dist/esm/index.js 687 B
dist/esm/index.js.map 1.9 kB
dist/esm/module-augmentation.js 58 B
dist/esm/module-augmentation.js.map 10.3 kB
dist/esm/select/async-creatable-select.js 856 B
dist/esm/select/async-creatable-select.js.map 1.9 kB
dist/esm/select/async-select.js 800 B
dist/esm/select/async-select.js.map 1.8 kB
dist/esm/select/creatable-select.js 824 B
dist/esm/select/creatable-select.js.map 1.9 kB
dist/esm/select/select.js 768 B
dist/esm/select/select.js.map 1.7 kB
dist/esm/types.js 44 B
dist/esm/types.js.map 3.7 kB
dist/esm/utils.js 2.9 kB
dist/esm/utils.js.map 4.7 kB
dist/types/chakra-components/containers.d.ts 716 B
dist/types/chakra-components/control.d.ts 1.8 kB
dist/types/chakra-components/index.d.ts 5.7 kB
dist/types/chakra-components/input.d.ts 256 B
dist/types/chakra-components/menu.d.ts 1.5 kB
dist/types/chakra-components/multi-value.d.ts 1.2 kB
dist/types/chakra-components/placeholder.d.ts 280 B
dist/types/chakra-components/single-value.d.ts 280 B
dist/types/index.d.ts 1.2 kB
dist/types/module-augmentation.d.ts 10.4 kB
dist/types/select/async-creatable-select.d.ts 572 B
dist/types/select/async-select.d.ts 508 B
dist/types/select/creatable-select.d.ts 536 B
dist/types/select/select.d.ts 436 B
dist/types/types.d.ts 3.4 kB
dist/types/utils.d.ts 711 B
LICENSE.md 1.1 kB
package.json 4.0 kB
README.md 45.9 kB

🤖 This report was automatically generated by pkg-size-action

@csandman csandman merged commit d3b9b43 into main Oct 11, 2023
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] name and required does not work with standard form validation
1 participant