We are using SimpleFormIterator inside ArrayInput like follows (as example)
<ArrayInput source="backlinks">
<SimpleFormIterator>
<DateInput source="date" />
<TextInput source="url" />
</SimpleFormIterator>
</ArrayInput>
But when clicking "ADD" to add new fields it is still focused in "ADD" button. Is there any way we can focus on first added field after clicking "ADD"?
You could try adding an autoFocus prop on the DateInput, however, it means the first item will be focused automatically too in an Edit form which is probably not what you want.
I think this should be the job of the SimpleFormIterator. Can you please open a feature request issue on react-admin repository ?
In the mean time, you can make your own form iterator which would handle the focus.
Related
I've two input fields in my application.
<ScrollView>
<View>
<Input
placeholder={`Enter the amount:`}
keyboardType="number-pad"
showSoftInputOnFocus={false}
onFocusCustom={() => setShowCalulator(true)}
onBlurCustom={() => setShowCalulator(false)}
caretHidden={true}
/>
<Input
placeholder="Enter a short description: (Optional)"
multiline
onBlurCustom={() => Keyboard.dismiss()}
/>
</View>
</ScrollView>
When we click the Amount Input field, it opens a calculator ( not a keyboard ).
When we click the Description field, it will open a keyboard. When the keyboard is open and we're in the description field and we click the amount field then the amount field gets focused for a few milliseconds and disappears. We need to click again to the amount field to get it focused and open the calculator.
This issue doesn't exist if we first unfocused the description field and then click the amount field.
You can try this:
keyboardType={Device.isAndroid ? "numeric" : "number-pad"}
and Could pls take a look at this blog,it may help:https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/
This is happening because your input is in ScrollView. You can find solutions here -> React Native requires two taps to change input focus when within scrollview
I use GiftedChat from react-native-gifted-chat and I use the InputToolbar component to style the input. My problem is that I can't change the "enter" button on the keyboard with that. Should I use TextInput and make a separated button for Send instead of InputToolbar?
I found the answer but I will not delete this question because it took me a while to find one.
You can add textInputProps in the InputToolbar component:
<InputToolbar
textInputProps={{returnKeyType: 'send'}}
/>
I am using an Input component with "decimal" keyboard. Unfortunately this keyboard has no button to dismiss itself.
My workaround is to show an icon on the right side with an appropriate action on it. However, this is of poor usability.
What is the best way to tackle this?
<Input
ref={purchasePriceInput}
placeholder="Enter purchase price"
returnKeyType={'next'}
keyboardType = 'decimal-pad'
onChangeText={value => setPurchasePrice(value)}
label={'Purchase Price'}
labelStyle={styles.label}
rightIcon={<Icon
name='check'
type='font-awesome-5'
color='gray'
onPress={()=>{purchasePriceInput.current.blur()}} //<-- my workaround
/>}
>
{purchasePrice.toLocaleString()}
</Input>
You only need to change returnKeyType="done"
returnKeyType determines how the return key should look.
The following values work across platforms:
done
go
next
search
send
These values are just appearance.
So in your case, next works but it looks like a right arrow.
How can I remove default toolbar and add a custom toolbar as per my requirements and not get the default Save button with Floppy Disk in SimpleForm?
I am able to style the buttons and remove the icons on the toolbar but not able to proceed further as I am new to react-admin.
As mentioned in the documentation : React-Admin Toolbar, you can always override the default layout of the toolbar with toolbar={<CustomToolbarComponent />} props in the SimpleForm component.
As for disabling the toolbar altogether, you can use toolbar={false} in SimpleForm and that would remove it.
You can also let toolbar be false, and maybe add the CustomToolbarComponent inside the SimpleForm component.
Something like :
<SimpleForm toolbar={false}>
<FormComponent1 />
<FormComponent2 />
<CustomToolbarComponent />
</SimpleForm>
As someone who was new to react-admin a few weeks ago too, please read the documentation thouroughly and their code and play with it, you'll come across the solution.
i referred to the official appcelerator site and implemented the Text Field where i have set the "focusable" property to true and have added the key pressed event but it is not working.Kindly provide the solution in detail?
index.xml:
<Text Field id="txt_field" focusable = true/>
index.js:
$.txt_field.addEventListener('keypressed',function({
*********my code***********
});
First, there seems to be a space in your xml, not sure if that is a typo. It should be this:
<TextField id="txt_field" focusable="true" />
Next, the keypressed event only works with hardware keys. If you just want to know a new character was typed, you should use the change event.
Best practice is to also add the event listeners to the xml, and don't add them in javascript
<TextField id="txt_field" focusable="true" onChange="changeTextField" />
Then you'll need to create a changeTextField function in your controller:
function changeTextField(e) {
// the textfield will be in e.source
// the new value of the textfield will be in e.value
}
based on that, you can check e.value and see what has changed as opposed to the last change.