added feature: allowClear in input field
#4895
Conversation
|
@heath-freenome , Hi, just a gentle follow-up to check if you’ve had a chance to look at this PR. |
There was a problem hiding this comment.
@Suyog241005 Sorry for the delay just got back from vacation on Monday and I've been busy.
First of all, thank you for being willing to add new features to RJSF, we really appreciate it.
I've given you some general feedback on the approach you took and a few high-level requests for changes.
|
|
||
| import { Field } from '../components/ui/field'; | ||
| import { getChakra } from '../utils'; | ||
| import { X } from 'lucide-react'; |
There was a problem hiding this comment.
Can you move this up just below the @rjsf/utils import. We like to keep the local imports separate from the library imports.
| <button | ||
| type='button' | ||
| onClick={() => onChange('')} | ||
| aria-label='Clear input' | ||
| style={{ | ||
| backgroundColor: 'transparent', | ||
| cursor: 'pointer', | ||
| border: '2px solid #ccc', | ||
| position: 'absolute', | ||
| left: '97%', | ||
| transform: 'translateY(250%)', | ||
| zIndex: 1, | ||
| borderRadius: '50%', | ||
| }} | ||
| > | ||
| <X size={12} /> | ||
| </button> |
There was a problem hiding this comment.
RJSF has a localization scheme that you need to follow. See the documentation and use the translateString() function found on the registry. Also, each theme has its own implementation of buttons, so I would suggest utilizing them. You will likely want to update the ButtonTemplates in TemplatesType to add a new ClearButton and implement them appropriately for each theme. Moreover the onClick should be a useCallback() to avoid excessive rerenders.
| {...(textFieldProps as TextFieldProps)} | ||
| aria-describedby={ariaDescribedByIds(id, !!schema.examples)} | ||
| /> | ||
| {options.allowClear && !readonly && !disabled && value && ( |
There was a problem hiding this comment.
MUI Has its own icons and the InputAdornment system. You probably want to use those instead. I know it is more work, but we want our themes to be as native to the theme-implementation system as possible. This means you likely want to ensure that the other themes also use the native capabilities if they exist. Please dig into the documentation for the theme to see if there are better, theme specific ways to do what you want. I've found that AI has gotten pretty good at helping with understanding the various themes we have implemented. I'd suggest using it to help you
| /** Flag, if set to `true`, will allow the input to be cleared */ | ||
| allowClear?: boolean; |
There was a problem hiding this comment.
| /** Flag, if set to `true`, will allow the input to be cleared */ | |
| allowClear?: boolean; | |
| /** Flag, if set to `true`, will allow the text input fields to be cleared */ | |
| allowClearTextInputs?: boolean; |
2 participants
Reasons for making this change
This PR adds support for a new ui:allowClear flag.
-Updated all theme packages to support allowClear feature
Fixes #4671
Checklist
npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:updateto update snapshots, if needed.