on selecting the dropdown fields, my values are coming side by side instead of one below another.
MAZ and NAZ are two different items.
<Select
variant='outlined'
id='zone'
className="zone_select"
defaultValue={formik.values.zone}
onChange={(e) => handleInputChange("zone", e.target.value)}
disabled={isDisabled}
>
{zones && zones.map((zone) => (
<MenuItem
key={zone.id}
value={zone.id}
>
{zone.zone_name}
</MenuItem>
))}
</Select>
This is the code to display dropdowns.
Can someone suggest me a way to rearrange my dropdown value to row orientation
Related
When I open one page I need to have the select already open. I use this tailwindcss select
I tried this
<Listbox value={selectedPerson} onChange={setSelectedPerson}>
//Listbox.Button has a prop called autoFocus
<Listbox.Button autoFocus={true}>{selectedPerson.name}</Listbox.Button>
<Listbox.Options>
{people.map((person) => (
<Listbox.Option
key={person.id}
value={person}
disabled={person.unavailable}
>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox>
The prop "autofocus" exists but it doesn't seem to work. Any suggestion?
I have an AutoComplete and it has onSearch event. They are working perfectly. Now, I need to add a dropdown to autocomplete options. The problem is that, when I expect to see opening dropdown, still onSearch is working and dropdown options can't be seen. The thing I am trying to do is that, when user click on dropdown I should show dropdown menu. When user click any other part of the option other than dropdown button, then onSearch should work as expected.
This is autocomplete :
<AutoComplete
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={500}
style={{
width: 250
}}
options={options}
onSelect={onSelect}
>
<Input.Search size="large" placeholder="input here" />
</AutoComplete>
This is renderItem function for options, it has dropdown :
const renderItem = (title, count) => ({
value: title,
label: (
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
{title}
<span>
<Dropdown overlay={menu} trigger={["click"]}>
<span
className="ant-dropdown-link"
onClick={(e) => e.preventDefault()}
>
Click me <DownOutlined />
</span>
</Dropdown>
{count}
</span>
</div>
)
});
This is a simulation of my situation. Also it does not have to be dropdown. When if it is a button or sth the scenario is the same. I could not prevent onSelect running on click.
In my case, I could use 'dropdownRender' props.
dropdownRender={(menu) =>
<>
{menu}
<span
className="ant-dropdown-link"
onClick={(e) => e.preventDefault()}
>
Click me <DownOutlined />
</span>
</>
}
items passed by options props shall be rendered in {menu} above.
Click me buttons shall not close the dropdown menu.
I'm working on a react-app website and I'm pretty new to this all.
The current look is this:
There's a toggle button and a dropdown, and they are above each other. Both are from semantic-ui-react. The code is here:
<Segment>
<LineChart
...
</LineChart>
<div >
<div >
<Checkbox
toggle
label="Full History"
checked={fullHistory}
onChange={() => { changeSettingsState({ fullHistory: !fullHistory }); }}
/>
</div>
<div>
<Dropdown placeholder='Select 2 Flight Data Options' fluid multiple selection options={options} value={this.state.selected} onChange={this.menuChange} />
</div>
</div>
</Segment>
I want the button and dropdown to be side by side, filling the horizontal space together. That's why I've put them in divs. I tried using style={{float:'left'}} and style={{float:'right'}} in the divs that contain Checkbox and Dropdown but that results in the following that bursts out of the box and looks bad.
Any help would be appreciated.
Hard to say for sure if this will work since there's no way to try the code, but this should do the job:
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
<Checkbox
toggle
label="Full History"
checked={fullHistory}
onChange={() => { changeSettingsState({ fullHistory: !fullHistory }); }}
/>
<Dropdown placeholder='Select 2 Flight Data Options' fluid multiple selection options={options} value={this.state.selected} onChange={this.menuChange} />
</div>
Note that the div wrappers around Checkbox and Dropdown are removed since they're unnecessary with this solution.
when I click the text box text a popup menu should open with text box.
similarly when I click a filter icon in the right side corner a menu should open with list of checkboxes.
but right now whats happening is both the menus are opening when I click at both the places.
only one menu should open from one location.
I debugged by putting consoles. the problem is with the below methods
`const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClickFilter = event => {
setAnchorEl(event.currentTarget);
};`
can you tell me how to fix it.
providing my code snippet and sandbox below.
https://codesandbox.io/s/material-demo-kpt5i
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClickFilter = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleCloseFilter = () => {
setAnchorEl(null);
};
<Typography variant="h6" id="tableTitle" onClick={handleClickFilter}>
text box
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleCloseFilter}
>
<MenuItem onClick={handleCloseFilter}>
<form
className={classes.container}
noValidate
autoComplete="off"
>
<TextField
id="standard-name"
label="Name"
className={classes.textField}
// value={values.name}
// onChange={handleChange('name')}
margin="normal"
/>
</form>
</MenuItem>
</Menu>
</Typography>
<Tooltip title="Filter list">
<IconButton aria-label="filter list">
<FilterListIcon onClick={handleClick} />
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>
<Checkbox
onChange={handleColumnHide}
inputProps={{ "aria-label": "select all desserts" }}
value="name"
/>
Dessert
</MenuItem>
<MenuItem onClick={handleClose}>
<Checkbox
onChange={handleColumnHide}
inputProps={{ "aria-label": "select all desserts" }}
value="calories"
/>
Calories
</MenuItem>
<MenuItem onClick={handleClose}>
<Checkbox
onChange={handleColumnHide}
inputProps={{ "aria-label": "select all desserts" }}
/>
Fat
</MenuItem>
Alright, you had a couple issues on your code that was preventing this from working properly.
The idea of the 'anchor' element it's that the menu will attach to that DOM object and render right next to it; this is all handled for you by Material and it works like a charm but the thing it's that you need to have this anchors properly set.
First, you need a way to differenciate an anchor element for each menu you want to display (which in your case, it's two).
For this case to work, I used a 'type' prop inside of your anchor state object and another prop called 'target' which is the one that will store the 'event.currentTarget'. Something like this: { type: 'icon', target: event.currentTarget }
Then, you need to have each anchor element (which can be a button, an icon, a label, H1 or whatever you want) separated from the Menu component itself; if you do otherwise, then the Menu will never disappear and it can only be closed using TAB or refreshing. Something like this:
<Typography variant="h6" id="tableTitle">
<span onClick={handleClickFilter}>NOTICE THIS LABEL HAS THE MENU TRIGGER FUNCTION</span>
<Menu
id="simple-menu"
anchorEl={anchorEl && anchorEl.type === 'textbox' && anchorEl.target}
open={Boolean(anchorEl && anchorEl.type === 'textbox')}
onClose={handleClose}
>
<MenuItem>
<form
autoComplete="off"
>
<TextField
label="Name"
margin="normal"
/>
</form>
</MenuItem>
</Menu>
</Typography>
Then, finally you need the anchor handler functions, which at this point it's handled by a hook and it's storing with the same variable name except it's modifying the 'type' prop I mentioned before.
const handleClick = event => {
setAnchorEl({ type: 'textbox', target: event.currentTarget })
}
const handleClose = () => {
setAnchorEl(null)
}
This should do the work successfully.
Anyway, I modified your codepen code and updated it right here.
Hope this helps!
I have a material-ui select component that presents a drop down of options to the user. The placeholder text shows as "select option" to tell the user to select the options they want. This is shown in light grey text, but because the text colour is so light it could be hard for colour blind people to read. Because of that I want to make the text colour darker but am not sure how. I don't want to make the placeholder one of the options within the dropdown if possible.
Code for the select component is:
<Select
options = {options}
isMulti
placeholder= "Select Options"
value = {this.selectedOptions"
onChange={this.changeH}
className = SelectOptionsDropDown
/>
Styling within the .css file is:
.SelectOptionsDropDown {
text-align: center;
margin: 10px;
}
This styling works fully
Can you try this approch?
<Select
fullWidth
size="small"
displayEmpty
inputProps={{ 'aria-label': 'select' }}
value={age}
onChange={handleChange}/>
<MenuItem value="" disabled>
<em style={{color:"#9E9E9E"}}>Placeholder</em>
</MenuItem>
<MenuItem value={'A'}>Option A</MenuItem>
<MenuItem value={'B'}>Option B</MenuItem>
<MenuItem value={'C'}>Option C</MenuItem>
</Select>
You can use ::placeholder, like below :
.SelectOptionsDropDown::placeholder{
color: red;
}
Please note, it's not supported in IE, check here.