Develop Reference

React Admin - How to disable validation onChange

I'm using react-admin, and I have a huge form, with a bunch of custom validation. It's very slow, even with the build version.
I tried to find a way to disable the validation on change and to have it only on blur or submit. But I have not found a solution or even workaround.
Every time a key is pressed in one of my input text (for example), the validation is triggered multiple times, and it takes a while for the letter to appear.
That's why I want to disable the validation on change.
Here's an example of one of my forms, every letter I write in one of my FormTab, the "validate me" is showing.
export const ThemeCreate: FC = (props: any) => (
<Create {...props} title="ui.themes.create" mutationMode="pessimistic">
<TabbedForm
toolbar={<GenericCreateToolbar />}
validateOnBlur
warnWhenUnsavedChanges
validate={() => {
console.log('validate me!');
}}
>
<MainFormTab />
<TranslationsFormTab />
</TabbedForm>
</Create>
);

You need to use the validateOnBlur={true} prop in the form component.
This prop is from final-form's <Form> component, see the last one in this doc page https://final-form.org/docs/react-final-form/types/FormProps

React onKeyPress Render Issue

I'm attempting to make a component which acts as a sort of bullet list. There's an input field held in an unordered list item (acting as the first bullet point, which by default will always be there). The field has an onKeyPress function that checks whether or not the user presses the return (or Enter) key to create a new bullet point. When that happens, the function adds another identical input field to the bulletList array, which is then rendered on the page using the .map() JS function.
The issue I'm having is the following: On the default (first) input field that is always there, the enter functionality works perfectly. The user can press enter, and a new input field is created below it. The problem happens here: On the second (newly-created) input field, the enter functionality partly works. It logs to the console what it needs to log as a test (indicating it's being triggered) but doesn't render a new input field below. What could be the issue here? Thanks!
The original input field:
<input onKeyPress={(e) => handleAdd(e)} autoFocus />
The adder function:
const handleAdd = (e) => {
if (e.key == "Enter") {
setBulletList([...bulletList, (<input onKeyPress={(e) => handleAdd(e)} autoFocus />)]);
console.log("Worked?");
console.log(bulletList);
}
};

You don't have anything that differentiates the first one from the second one so React is getting confused when there's more than one. React will often warn you to make sure each element has it's own unique keys. If they don't have unique keys/identifiers then React won't update the virtual dom. The virtual dom is what React uses to identify changes that were made.
Give each one it's own class and that should work.

You should add the input value, not the input HTML tag, like this:
const handleAdd = (e) => {
if (e.key == "Enter") {
setBulletList([...bulletList, e.target.value]);
console.log("Worked?");
console.log(bulletList);
}
};

Hide autocomplete suggestion list on select dropbdown item and enter click

I 've created autocomplete suggested input field, with debounce hook, only one issue left, is close drop-down when I select item or click outside? And what is the best solution to show selected item, show it in input value on create some 'redableRenderValue'.
Current behavior : when I click enter or on item itself the drop down close and reopen again
Expected value: close on blur , close on enter and close on select item
https://codesandbox.io/s/usedebounce-ncq2n

Try this:
const [showSuggestions, setShowSuggestions] = useState(true); //make useState initial value to true instead of false.
and, delete below code from useEffect
setShowSuggestions(true); //delete this line from your code
also alter here:
<input
type="text"
placeholder="Find"
onChange={e => setSearchTerm(e.target.value)}
onClick={onInputClick} //add this attribute
onKeyDown={onKeyDown}
// onBlur={onBlur}
value={searchTerm}
autoFocus
/>
and a corresponding function to call:
const onInputClick = () =>{
setShowSuggestions(true);
}
and Run your code.
I try it this will be working fine by doing this. Hope this will help you to.

Ask user for confirmation before updating form value in final-form

I'm using react-final-form and have 2 radio fields (Yes/No). When 'Yes' is the current value and the user selects 'No' I want to show a modal asking for confirmation from the user. If the user cancels, the value should remain the same, if the user confirms, it should update.
Is there any way to do this with the current version of react-final-form or final-form? I've had a look at the documentation and noticed beforeSubmit, however didn't see anything like beforeChange

You'll have to intercept the change yourself.
<Field name="whatever">
{({ input }) => (
<input {...input} onChange={event => {
if(showConfirmDialog()) {
input.onChange(event); // pass event through to RFF
}
}}/>
)}
</Field>

ReactJS Element focus() not firing

I have a number input field that I'm trying to focus on after receiving input from a bar-code scanner. In reality the scanner is just a pseudo keyboard that I watch for the tab key to get pressed.
In Edge the input receives focus as expected, but in all other browsers tested (Chrome/Firefox) the input doesn't gain focus. Safari has not been testes since I'm on a PC.
// I'm using a lifecycle method to watch for a change to the components props.
// The onInputFocused will unset the value, but I've disabled to this
// to eliminate any possible race cases?!
componentDidUpdate() {
if (this.props.detail.shouldFocus) {
setTimeout(() => {
this.qtyInput.focus();
}, 250);
// this.props.onInputFocused(this.props.detail);
}
}
render(){
return (
...
<input type="number" className="form-control" min="0" name="qty_received" value={detail.ReceiptQuantityReceived}
ref={(input) => { this.qtyInput = input }}
onChange={(e) => { onQtyReceivedChange(e, detail) }}
onBlur={() => { onReceiveShipmentRowBlur(detail) }} />
);
}
I originally was calling focus without a setTimeout, but attempted the timeout based on some suggestions online. I have also attempted to change the input to text, but that didn't have any effect either.
Doing a console.log on this.qtyInput outputs the expected element.
The only other thing I can think of is that the modal that a user scans in to gains it's focus via a similar function, but it has been removed by the time the focus call should be happening.
To add to the weirdness, I've added a console.log to the input's onBlue event and it is getting fired even though you can't type in the field or have any visual indication of focus.

one thing you must try is add this attribute for your INPUT element
(input autoFocus ..)
this attribute may help you