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: allow booleanInput to be a controlled input #10635

Closed

Conversation

Ernesto-tha-great
Copy link

Problem

Fixes issue #10629. The BooleanInput component did not properly support being controlled through the value prop, unlike other input components in React-Admin. This made it difficult to:

  • Control filter inputs directly from props
  • Handle mixed falsy values (null/false/'') in database records
  • Create dynamic forms where BooleanInputs need to be programmatically controlled

Solution

  • Added support for the value prop in BooleanInput component
  • Implemented an useEffect hook to synchronize the component's internal form state with the external value prop
  • Added TypeScript type definition for the value prop
  • Maintained backward compatibility with existing code
  • The implementation is minimal and follows the same pattern used by other controlled components in React-Admin.

How To Test

  1. Run the CRM example with "make run-crm"
  2. Navigate to the Sales section(http://localhost:8000/#/sales) and edit any sales representative
  3. Notice the "disabled" field is always checked regardless of the actual data value because it now has value={true}
  4. Try modifying the code:
  • Change value={true} to value={false} and verify the switch stays off
  • Remove the value prop entirely and verify it behaves normally (reflecting the underlying data)
  1. You can also test programmatically controlling the component by:
  • Creating a state variable and connecting it to the value prop
  • Toggling the state with a button outside the form
Screenshot 2025-04-02 at 06 43 55

Screenshot 2025-04-02 at 06 44 22

Additional Checks

  • The PR targets master for a bugfix or a documentation fix, or next for a feature
  • The PR includes unit tests (the existing tests are sufficient)
  • The PR includes one or several stories (if not possible, describe why)
  • The documentation is up to date

Also, please make sure to read the contributing guidelines.

@Ernesto-tha-great Ernesto-tha-great changed the title chore: allow booleanInput to be a controlled input [RFR]chore: allow booleanInput to be a controlled input Apr 3, 2025
@Ernesto-tha-great Ernesto-tha-great changed the title [RFR]chore: allow booleanInput to be a controlled input chore: allow booleanInput to be a controlled input Apr 3, 2025
@Ernesto-tha-great
Copy link
Author

@djhi

Hi, this is ready for review. let me know if it needs modification.

@Ernesto-tha-great Ernesto-tha-great changed the title chore: allow booleanInput to be a controlled input Fix: allow booleanInput to be a controlled input Apr 3, 2025
@slax57
Copy link
Contributor

slax57 commented Apr 7, 2025

Closing as related issue #10629 was closed

@slax57 slax57 closed this Apr 7, 2025
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.

2 participants