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?
Related
I'm trying to implement a kind of table, which has an add button that opens a modal.
Inside the modal, I have the inputs that I want to update in the table, but using the ant design modal it has an ok button and a cancel button. How do I make the path to get the values? I'm having trouble understanding/writing this syntax. Can someone help me?
on the "onOk", i don't know how to write the function, tried creating a onSubmit(values) and console.log it but it doesn't show
Here's the code
function showModal(nome,colunas) {
setFormDisplay("");
setModal(!modal);
setFormName(nome);
setFormColumns(colunas);
}
function cancelModal() {
setFormDisplay("none");
setModal(false);
setFormName("");
setFormColumns([]);
}
<>
<div className="">
<CardsHost posts={nomes} />
</div>
<Modal
visible={modal}
onOk={}
title="Novo Prontuário"
onCancel={cancelModal}
style={{display:`${formDisplay}`}}
width={1000}
>
{formColumns.map((column,index) => (
<>
<div className="labelll">
<label key={`label-${index}`}>{column.title}</label>
{(column.key !=='proc' && column.key !== 'meds' )
? <Input key={`input-${index}`} style={{ width: "61.3%" }} />
: (column.key == 'proc' ) ? <div className="pesquisa-input"><Demo /></div>
: <div className="pesquisa-input"><PageComponentMeds /> </div>
}
</div>
{/*<div className="labelll">
<label> Data de Atendimento</label>
<DatePicker style={{ width: "61.3%" }} />
</div>
<div className="labelll">
<label> Nota </label>
<TextArea style={{ width: "61.3%" }} />
</div> */}
</>
))}
</Modal>
</>
);
}
The easiest way would be use to add a state variable for both of your input values. You can update them using the onChange callback provided by the antd components. On submit you use the state values to make your api call.
Make sure that you reset the variables on cancel and after a successful call.
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've been trying to log my event object value in 'option' tag and it does not work, but it does work in select tag, here is my code:
{data.map((item, index) => {
const {name, options} = item;
return (
<div className="item" key={name}>
<label htmlFor={name}>
Select any {name}:
<select name={name} id={name} onClick={(e) => console.log(e.target.value)}>
<option disabled selected>Any {name}</option>
{options.map((item, index) => {
return (
<option
value={item}
key={index}
onClick={(e) => console.log(e.target.value)}
>{item}</option>
)
})}
</select>
</label>
</div>
)
})}
what's wrong with my option tag?
I don't think there is anything wrong with your option tag. Did you encounter this issue in Chrome?
This seems to be a known issue in Chrome: The onclick event does not work for options
Indeed, I tried onClick with both Chrome and Firefox - for the option tag, onClick does fire in Firefox but not in Chrome.
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'm mapping results from a GET request. The mapping works fine. I get each User picture, name and even the correct label on the button. But when I console.log on the button, I want to get info of the user. When I click on the button, it gives user_id of all users not the particular one.
{filteredEmails.map(user => {
return (
<List>
<div className="mail" key={user.user_id}>
<ListItem
key={user.user_id}
disabled={true}
leftAvatar={
<Avatar size={80} src={user.picture} />
}
rightIconButton={
<RaisedButton
label={user.name}
primary={true}
key={user.user_id}
onTouchTap={console.log(user.user_id)}
style={style} />
}
>
<div className="searchContent" key={user.user_id}>
<div className="subject">{user.name}</div>
<br></br>
<div className="from">{user.email}</div>
<br></br>
<div className="subject">{user.identities[0].provider}</div>
</div>
</ListItem>
</div>
</List>
);
})}
Mapping users picture
On the above picture, I want to press the button and get user_id or name of the user. I can't seem to do that.
My guess is problem with this context, but I'm unable to fix it so far.
You need to pass a function to onTouchTap event, and bind the value of user_id to that, by this way whenever user click on button that specific user_id will get passed to that function, then do the console.log() inside that it will print the proper value.
Like this:
onTouchTap={() => this._handleClick(user.user_id)}
Define the _handleClick function like this:
_handleClick(user_id){
console.log(user.user_id)
}
You also need to define the unique key to each List item inside map otherwise it will throw warning, user_id will have the unique values you can use that also.
Write the map like this:
{filteredEmails.map(user => {
return (
<List key={user.user_id}>
<div className="mail">
<ListItem
key={user.user_id}
disabled={true}
leftAvatar={
<Avatar size={80} src={user.picture} />
}
rightIconButton={<RaisedButton
label={user.name}
primary={true}
key={user.user_id}
onTouchTap={onTouchTap={() => this._handleClick(user.user_id)}}
style={style} />
}
>
<div className="searchContent" key={user.user_id}>
<div className="subject">{user.name}</div>
<br></br>
<div className="from">{user.email}</div>
<br></br>
<div className="subject">{user.identities[0].provider}</div>
</div>
</ListItem>
</div>
</List>
);
})}