We Keep Coding

How to get focus from click event of a text to googleplaces autocomplete input?

need your help for an app iam trying to develop. So I have used react native googleautoplaces complete for the location, which is shown in the first text input.
The page when loaded gets the current location based on geocoder, geolocation codes i have used.
What i need is that, when i click on the 'change' link, it should focus or select the location input.page design,code for google autocomplete,code2.
If i use ref, can i do like that. If yes, how to add multiple ref, because already another ref is used in the autocomplete.ref method used inside autocomplete, which takes the address value.

<GooglePlacesAutocomplete
...
ref={(ref) => { this.ref_location = ref }
//your element where the "Change" is being pressed. I used a button just as an example
<Button
title="Change"
onPress={() => { this.ref_location.focus(); }}
/>

Material-UI Select doesn't update after onChange

I've seen this problem about all around the web but nothing could come short of giving me a valid explanation.
I'm using Material-UI Select and the good ol' setState(...) from React (not hooks though)
My component is composed essentially of those lines :
class MyComponent extends Component {
exportOptions = ['CSV','SDF']
constructor(props) {
super(props);
this.state = {
[...]
formatToExportTo : this.exportOptions[0]
};
[...]
<Select value={this.state.formatToExportTo}
style={{width : "10em"}}
onChange={event=> {
this.setState({formatToExportTo : event.target.value})
}}>{
this.exportOptions.map(f=><MenuItem key={f} value={f}>{f}</MenuItem>)
}</Select>,
And my problem is that my Select component dosen't update its value after selecting another option.
So far I've tried :
setState({...this.state, formatToExport : event.target.value}) in the onChange= of the Select and in the Select tag : value = {this.state.formatToExport}
setState({...this.state, formatToExport : event.target.value}) in the onClick= of each options and in the Select tag : value = {this.state.formatToExport}. But that was only to see the update, because the event.target.value isn't right anyway
and the current version of my lines written above also onClick OR onChange (without tthe cloning of state which is supposed to be done by setState alone).
It's like in the official example so I truly don't see where this lack of update could come from. No matter what I try, the currently displayed value of the Select component doesn't change is display, even though the state was properly updated
Thank you for the time you took to read me !

After searching for 3 hours total :
normally value={this.state.formatToExportTo} should work ( I tried it alone without the rest of my app surrounding it)
But since I made some quircky things with my this and the order of update, I just had to replace :
value={this.state.formatToExportTo} by defaultValue={this.state.formatToExportTo}
That's all ! I hope it helps someone who'll come by this question

react-select function call on click event on the chip

Hi I am trying to change a state in my component when there is a click event on a particular chip rendered in the search bar. Is that possible to do?
I am aware of the multiValue multiValueLabel and I can for example change the background color of the chip with that, so I thought I could use those tags to change the state but I didn't have any luck.
I have attempted to find a solution with isSelected tag but I am always reading undefined in the states.isSelected when console.logged it.
I feel like I need a onClick() functionality somewhere but I can't figure it out. A bit of a guidance would be much appreciated!
I am sharing a live code here so maybe we can discuss over it.

if you want to validate if an option is selected you could use the prop: isOptionSelected
or
const onChange = selectedOptions => setSelected(selectedOptions);
with props
isMulti
value={selected}
onChange={onChange}
components={{
MultiValue: SortableMultiValue,
}}

You can attach onClick listener in MultiValueLabel component
<Select
isMulti={true}
components={{
MultiValueLabel: (props) => {
return (
<div onClick={() => console.log(props.data)}>
<components.MultiValueLabel {...props} />
</div>
);
}
}}
{...}
/>
Live Demo

How can I trigger opening a select form's options on click of another button in react? I have tried using a ref but its not working

Here is my select form:
<form ref={skuSelectRef}>
<label htmlFor="size" />
<select
id="size"
value={selectedSKU}
onChange={() => changeSKU(size.options[size.selectedIndex].value)}
>
<option value="default">
{outOfStock ? 'OUT OF STOCK' : 'SELECT SIZE'}
</option>
{availableSizes.map((size, i) => (
<option key={i} value={size}>
{size}
</option>
))}
</select>
</form>
The button that when I click I would like for the select form above to open:
<div className="a2cbtn">
<button onClick={onAddToCartClick} id="a2cbtn">
<span>ADD TO CART</span>
</button>
</div>
Both of the above components are in my AddToCart subcomponent. Here is a snippet of the button click handler in the parent component where I am trying to make the select form open:
if (this.state.selectedSKU === 'default') {
this.skuSelectRef.current.click();
console.log(this.skuSelectRef);
console.log('clicked');
}
It seems that the ref is properly created because I am getting {current: form} logged to the console and the click is working as I'm getting "clicked" logged to the console as well. However the select form is not opening!
At first I tried having the ref in my select element instead of form but then when I clicked the button it gave me an error saying that the function click doesn't exist so I moved the ref to the form element enclosing it and now I am not getting that error but it is still not opening.
I have tried this.skuSelectRef.current.focus() and this.skuSelectRef.current.select() as well to no avail.
Any ideas?

If you want to focus the select when clicking the button, that can be done with refs. It's not working for you because you attached the ref to the form element and you need to be attaching it to the select element directly.
const skuSelectRef = createRef();
const onAddToCartClick = () => {
if (size === "default") {
skuSelectRef.current?.focus();
}
};
<select ref={skuSelectRef} ....
CodeSandbox Link
If you want to open the select element, that's tough. There is no open() method like there is for focus(). There's a whole discussion about how to do it on this question. But I would recommend that you not reinvent the wheel. There are lots of libraries for form and UI components that can do this via a boolean open prop. Material UI is one of the biggest. Here is their demo for a controlled open.

Semantic UI React, Dropdown Selection

Please take a look at my code for Dropdown,
I'm using the semantic ui react dropdown on an EditProfile component. I have pasted a sample code here, https://codesandbox.io/s/m4288nx4z8, but I could not get it to work because I'm not very familiar with functional components in React, I've always used Class component. But you can check the full code for the whole component below in the github gist.
https://gist.github.com/mayordwells/b0cbb7b63af85269091f1f98296fd9bb
Please, I need help on inserting values from multiple select options of a Dropdown into the Database and also a way to display that back upon viewing the profile edit page again.
I'm using semantic-ui-react in react + rails app.
Also when I insert a value using a normal drop down without multiple select, the value gets persisted into the database.
<Dropdown
placeholder='Select Country'
fluid
search
selection
options={countryOptions}
name='country'
defaultValue={this.state.extraInfo.country}
onChange={(e) => this.handleExtraInfoChange('country', e)}
/>
This code handles change for the dropdown elements.
handleExtraInfoChange = (name, event) => {
let value;
if (event.target.value !== undefined) {
value = event.target.value;
} else {
value = event.target.textContent;
}
let newExtraInfo = Object.assign(this.state.extraInfo, { [name]: value })
this.setState({ extraInfo: newExtraInfo});
}
But when I visit the page again, I get a white blank in the input box. Here's a screen pic for that. When I comment out the defaultValue or value property(i have tried with defaultValue and value), the white blank disappears, but the value picked by a user is also not seen.
Please advice what is a possible solution to this misbehavior? And what is the best way to insert multiple values into the Database?
Thanks in advance for your time.

A functional component does not have state, it's used for composition; you want to store state, so you either have to create a Component class or you need an external state container like redux.