Could you please tell me how to show select box on focus of input field and close after select item from the drop down?
Here is my code
return (
<div className="App">
<Select
value={selectedOption}
closeMenuOnSelect={false}
menuIsOpen={menuIsOpen}
isMulti={true}
className="select-item"
classNamePrefix="select-item"
onInputChange={() => this.setState({ menuIsOpen: true })}
onChange={this.handleSelectedChange}
options={options}
/>
</div>
);
https://codesandbox.io/s/5v41wrxw9n
using this plugin
https://github.com/JedWatson/react-select
Refer to the link for updated code: https://codesandbox.io/s/mmjvp25z38
I used onFocus to show dropdown
Used on handleSelectedChange method and updated menuIsOpen prop via set state
Related
I'm using Select component from antd Design in my React app with Tag mode, and I want the tags inside that Select to be editable when the user double click on it
Any idea how can I do that?
Here is the code so far:
<Select
showSearch={false}
mode="tags"
onChange={handleChange}
tokenSeparators={[',']}
value={Tags}
>
{children}
</Select>
Check out React Synthetic Event : https://reactjs.org/docs/events.html#mouse-events
<option onDoubleClick={yourFunctionForDoubleClick} value={option.value}>{option.label}</option>
yourFunctionForDoubleClick =(event)=> { your logic here, then setState({yourState: event.target.value})}
Imagine I have a button somewhere. When clicked, the text on it, now goes to my search bar. How do I make the window scroll to the search bar too after the value is set in the Input element shown below?
<Flex
flexDirection="column"
justifyContent="center"
alignItems="center"
maxWidth="90%"
mt={4}
>
{!filteredBlogPosts.length && 'No posts found.'}
{filteredBlogPosts.map((frontMatter) => (
<>
<BlogPost
key={frontMatter.title + frontMatter.lastPublishedOn}
handleSearch={(anyKey) => setSearchValue(anyKey)}
// Insert your code here, how to scroll after setting the key to search?
{...frontMatter}
/>
</>
))}
</Flex>
And, here is the <Input> field
<Input
aria-label="Search"
borderColor="blue.500"
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search"
value={searchValue}
//or should I do scroll here? How?
autoFocus
onFocus={e => e.currentTarget.select()}
/>
Is this something easy to do? Please present code examples if possible.
Thanks.
If anyone faces this issue in the future, I solved it using this simple function.
const scrollSearch = myKey => {
window.scrollTo(0, 0);
frontMatter.handleSearch(myKey)
};
And passed the scrollSearch function in button onClick.
I am using select - option for rendering dropdown content .
Code:
<FormControl
className="form-input-field"
error={true}
>
<div>
<select
required
onChange={(event) =>
this.props.handleChange(event)
}
id="Payment"
name="Payment"
>
<option value="">Select</option>
{this.props.DataMap.map((product, key) => (
<option
key={product.tableKey}
value={
[this.props.DataMap.Payment]
.Value
}
>
{product.payment}
</option>
))}
</select>
</div>
</FormControl>
I want validations for the same.
I tried : Putting required field // using renderValue={(value) => ⚠️ - ${value}} // setting error var of FormControl to true // setting validated={true} in Form etc..
With Input content validation & FormHelperText to display error, it works fine.
But is there any way to get the dropdown box highlighted in red colour when error is present...?
I cant use MenuItem as i need the fetch the map content to dynamically render dropdown content.
If anyone has faced/worked on similar issues, pls suggest.
I have the following Select from Material UI:
<FormControl className='select-form'>
<InputLabel id="demo-simple-select-outlined-label">Choose User</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={this.state.userId}
onChange={this.handleChange}
label="choose-user"
>
{Object.keys(users).map(uId => (
<div key={uId}className='select-menu'>
<img
src={''}
alt={`Avatar of me`}
className='signin-avatar'
/>
<MenuItem value={30}>{users[uId].name}</MenuItem>
</div>
))}
<MenuItem value={20}>Hello</MenuItem>
</Select>
</FormControl>
My handleChange method gets the value of the MenuItem below with the value of 20 when selected. I just used that as a test and the Select and the onChange work just fine.
The problem is the div, that get dynamically rendered from the users object. I want to render an avatar and the name of the user in every MenuItem. I have to pack them in a div, because the .map() needs to have one parent item.
I want to pass the value (the user id) of the selected MenuItem to the handleChange method, but all I get is an undefined when a user select is clicked.
How can I pass the value of the select to the onChange method, when the Select items are packed inside a div?
The correct way is to put your image inside the MenuItem, and you will get the value
{
Object.keys(users).map((uId) => (
<MenuItem value={uId}>
<img src={''} alt={`Avatar of me`} className="signin-avatar" />
{users[uId].name}
</MenuItem>
));
}
I'm trying to create a select (dropdown) using Material-UI within a redux-form. There's an example for using M-UI's selects within a redux form on their website.
I'd like to do the same type of example except using Material UI's MenuItem's instead of the option tags used in the example.
It seems as though simply replacing the options with MenuItems does not work, and the MenuItems do not appear under the children for the select field. I have gotten this to work with options:
Here is the renderSelectField used to create the select component. This is working:
renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
<FormControl className={this.props.classes.formControl} error={touched && error}>
<InputLabel>{label}</InputLabel>
<Select
native
{...input}
{...custom}
>
{children}
</Select>
{this.renderFormHelper({ touched, error })}
</FormControl>
)
And here is the render:
render() {
return (
<div>
<form onSubmit={this.props.handleSubmit(this.props.submitForm)}>
<Field name={"sheetType"} component={this.renderSelectField} label={"Sheet Type"}>
<MenuItem value={"basic"} primaryText={"Basic"}>Basic</MenuItem>
<MenuItem value={"advanced"} primaryText={"Advanced"}>Advanced</MenuItem>
</Field>
<Button onClick={this.props.onCancel}>Cancel</Button>
<Button type="submit" color={"secondary"}>Next</Button>
</form>
</div>
)
}
I expect there to be two dropdown menu items passed in as the children of MenuItem, but i believe there needs to be some property passed into MenuItem itself.
Replacing menu item with option tags work.
You are mixing between simple Select and native Select. If you going to use native change <MenuItem> to <option> otherwise just remove native property.
Native pattern:
<Select native>
<option value="item">item</option>
</Select>
Simple Select pattern:
<Select>
<MenuItem value="item">item</MenuItem>
</Select>