Develop Reference

How to autofocus select input after async call?

I'm using Material UI's Autocomplete component, and I'm running into an issue. I have a debounced API call that is made when a user starts typing, and I disable the text input field while the call is being executed.
The issue is that disabling and then enabling the text field makes the text input lose focus. I've tried giving it an ID and grabbing it in the DOM and running .onFocus(), but that a) didn't work and b) isn't very React-y.
I also tried to add a useRef hook, but that didn't work either.
Any thoughts/suggestions?
Codesandbox

Hey you can add inputRef prop and then just wait until it is done loading. Here is exmaple:
const inputComponent = React.useRef(null);
return (
<Autocomplete
{/* ... */}
renderInput={params => (
<TextField
{/* ... */}
InputProps={{
{/* ... */}
inputRef: inputComponent,
{/* ... */}
}}
/>
)}
/>
);
And then I am guessing that you tried to focus element while it was still disabled, I guess a little race condition. You can add useEffect that is dependent on open and loading like this:
React.useEffect(() => {
if (!loading && open) {
inputComponent.current?.focus();
}
}, [loading, open]);
Here is the link to sandbox with it. Cheers, hope it helps.
P.S I don't think it is a good idea to disable the field while options are loading, it won't feel smooth for the user :)

Logically disable Drag on react-native-draggable-flatlist

I'm trying to disable the drag feature based on some props change, not sure how to disable/enable it on 'react-native-draggable-flatlist', please find below the code
import DraggableFlatList from 'react-native-draggable-flatlist'
<DraggableFlatList
scrollPercent={5}
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item: any) => `draggable-item-${item}`}
onMoveEnd={({ data }: any) => {
this.setState({ data })
}}
/>

As per my requirement, I have totally disabled the parent component and it worked, but still not sure if there are any ways to disable it by passing a particular prop

React Native onPress unable to trigger while other process is running

I am using FlatList to render my list, each list item is clickable; however, when I click the item, it does not work until everything is loaded.
It seems like while the other items are still rendering, you can not perform an action or event until everything is fully loaded.
Here is my code:
return (
<FlatList
refreshing={this.props.refreshLoading}
horizontal={false}
initialNumToRender={20}
maxToRenderPerBatch={20}
showsVerticalScrollIndicator={true}
numColumns={2}
onEndReachedThreshold={0.1}
bounces={true}
keyExtractor={(item) => item}
data={userList}
renderItem={(item) => {
return (
<UserCard
index={item.item[1]}
userInfo={item.item[1]}
contentSize={this.state.contentSize}
navigation={this.props.navigation}/>
)
}}
onEndReached={this.onLoadMore}
onRefresh={this.onRefresh}
/>
);
Is there a proper way to handle it?

This is because the Javascript thread is blocked by the rendering on the screen. Once the render of the batch of rows is complete then it will open up the thread for the click event. This rendering happens in batches, which can be tweaked.
See this issue on Github.
Basically you can play with the initialNumToRender and maxToRenderPerBatch parameters on the list until you get something that works for you, and doesn't look jumpy when rendering (it will render the list incrementally which might look weird if the values are too low - called fill rate).
You can read about these parameters in the react-native docs:
initialNumToRender
maxToRenderPerBatch

What is the difference between writing React component opening and closing inline and in different lines?

When I was creating a Multiselect dropdown using Material-ui, I stuck into something strange.
If I provide select list item like this:
let rows = this.props.masterList.map(item => (
<MenuItem key={item.key} value={item.key}> {item.value} </MenuItem>
))
It shows props.children element as an array of 3 items
The output is coming with commas following the text:
If I write the same code with new lines like this :
let rows = this.props.masterList.map(item => (
<MenuItem key={item.key} value={item.key}>
{item.value}
</MenuItem>
))
It shows props.children element as a single value
The output is coming properly in this case:
Can anyone please show me the difference between these two?
Thanks

Remove the extra space before and after {item.value} it will work.

How to pass initial values into Material-UI multiple Select with chips using redux-form?

I'm trying to create multiple select control with redux-form and material ui. Actually, i use redux-form-material-ui wrapper, just couldn't add it as a tag.
Here is a part of my code:
<FormControl fullWidth>
<InputLabel>Shops</InputLabel>
<Field
name="shops" component={Select} fullWidth
multiple format={(value) => (Array.isArray(value) ? value : [])}
renderValue={(selected) => (
<div className={classes.chips}>
{selected.map((value) => <Chip key={value.id} label={value.name} className={classes.chip} />)}
</div>
)}
>
{allShops.map((shop) => <MenuItem key={shop.id} value={shop}>{shop.name}</MenuItem>)}
</Field>
</FormControl>
where Select is an redux-form-material-ui Select, allShops is an array passed from external component as a prop.
Everithyng seems to be fine when this stuff renderes - i have correctly rendered Chips corresponding to my initialValues, but for some reason Menu (or DropdownList or whatever renders MenuItems) remains untouched by these values. If i try to select some items and deselect them - chips are keeping added and removed, menu items are becoming "selected" and "deselected", but this happenes only with "new" shops. How can i make this work correct way? I need not only chips being correctly rendered depending on initialValues, but also these MenuItems, so I could, for example, deselect selected values after form rendering. Can anyone help me? Would appreciate that.