Nesting a checkboxes inside MenuItems inside a DropdownButton does not work; clicking the checkboxes has no effect:
<Dropdown.Item>
<Form.Check
name={"title"}
type="switch"
defaultChecked={props?.searchIn?.title}
onChange={props?.handleSearchIn} />
</Dropdown.Item>
If try to invoke outside from DropDownMenu its working.
After struggling a lot for this problem, I found a simple solution. It can be useful for people who have this problem.
If you put any input directly in Dropdown.Menu without using Dropdown.Item , it works correctly.
<Dropdown.Menu>
<Form.Check
name={"title"}
type="switch"
defaultChecked={props?.searchIn?.title}
onChange={props?.handleSearchIn} />
</Dropdown.Menu>
Related
I'm new to React and Ant Design.
I want to use a List that has a Checkbox for each item. As in the attached example:
<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
Check all
</Checkbox>
<Divider />
<List
dataSource={plainOptions}
renderItem={value => (
<CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
)}
/>
https://codepen.io/antoinemy/pen/dymvwJG
However I would simply like to replace the CheckboxGroup with a Checkbox but I can't do it through the List.
Can someone show me a solution and explain to me?
I would like to eventually produce other things through this list. I'm not interested in the CheckboxGroup, I really want the List to deploy my items.
Thank you,
Antoine (FR)
I think you can include the Checkbox components inside the List.Item and wrap the Checkbox.Group outside
Here is my example code
https://codesandbox.io/s/basic-list-antd-4-21-7-forked-h6fejs?file=/demo.js
I am using Material-UI in one of my ReactJS projects.
I have a few buttons: some - primary, the rest are secondary. What I want to achieve is to disable the tabIndex property on secondary buttons, leaving only the primary buttons accessible with the keyboard tab.
Turns out setting tabIndex attribute to the Button component does not work, nor setting the tabIndex via inputProps:
<Button
variant="contained"
tabIndex="-1" //does not work
size="small"
startIcon={SearchIcon}
color='secondary'
inputProps={{ tabIndex: "-1" }} //does not work either
> some text
</Button>
How do I achieve disabling the accessibility of the secondary buttons via keyboard tab?
I can't set tabindex attribute to an element via CSS, can I?
Any help would be appreciated.
Thank you.
for textfield and input you must code like this
<TextField label="1" inputProps={{ tabIndex: "1" }} />
for button your code must be like this
<Button tabIndex="2">Button 2</Button>
I just went through this on the MUIv5 update. For me, using braces worked:
<Button tabIndex={2}>Button 2</Button>
i have this code, what i want to do on the tab prop is add Tooltip on the icon:
<Tabs.TabPane tab={<Tooltip placement="left" title="adasd"><Icon size="1.2" name="cog" /></Tooltip>} key="map">
<MapProperties onChange={onChange} canvasRef={canvasRef} />
</Tabs.TabPane>
i was expecting for the hover to show but it's not working. is it possible to add ant design tooltip on tabs pane?
Anuj's answer isn't correct since TabPane should be direct children of Tabs component. I also had such problem and I find out that i can solve it like this:
<TabPane
key="3"
tab={(
<Tooltip title="Your hint that appears after user's mouse will be over the tab title">
<span>tab title</span>
</Tooltip>
)}
disabled={mode === PageMode.NEW}
>
tab attribute accepts any ReactNode so we can just wrap our tab name with any component. And tooltip isn't exception.
Proof that this works
It should be like
<Tooltip title="foo">
<Tabs.TabPane>....</Tabs.TabPane>
</Tooltip>
https://ant.design/components/tooltip/#header
I would like to compose a custom RadioGroup element as seen in this example. Ideally I'd like to have an Avatar as a sibling to the radio element of the control pro. Im stumbling on this JS warning or at least understanding the root of why inputRef cant spread to this element.
React does not recognize the inputRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputref instead. If you accidentally passed it from a parent component, remove it from the DOM element.
As you can see in the example the custom control prop breaks the RadioGroup functionality making it multi-select. Is this custom Radio component possible?
`<Field name="bestFramework" component={RadioGroup}>
<FormControlLabel
control={
<span>
<Radio value="react" />
<Avatar
alt="react"
src="https://image.flaticon.com/icons/svg/53/53058.svg"
/>
</span>
}
label="React"
value="react"
/>
<Radio value="angular" label="Angular" />
<Radio value="ember" label="Ember" />
</Field>`
Material UI ReactJS :does material UI support any autofocus feature on the popovers.
I want to set the focus on the popover, as soon as the material UI popover opens.
MaterialUI Popovers inherit the Modal API. Supposedly the disableAutoFocus property allows NOT focusing on Popover/Modal content, however I also am experiencing it NEVER focusing in the first place.
https://material-ui.com/api/modal/
On what do you want to set the focus ?
The "autoFocus" property should be set on some Popover content childs.
For example, we use the "autoFocus" property of Material-UI TextField for this :
https://material-ui.com/api/text-field/
Add the autoFocus property to the first form element in your popover.
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
>
<input type="text" autoFocus />
<Typography className={classes.typography}>
The content of the Popover.
</Typography>
</Popover>
https://stackblitz.com/edit/qbx44l?file=demo.js