The material-UI react stepper control steps do not receive the tab focus. Is there a way to enable tabFocus on the steps?
https://material-ui.com/components/steppers/
Already I see tabFocus is exist on the steps but the styles are not show. I think if you add focusRipple props attribute
<StepButton focusRipple onClick={handleStep(index)} completed={isStepComplete(index)} {...buttonProps}>
{label}
</StepButton>
true on the StepButton component you might be able to see the tab focus
https://codesandbox.io/s/material-demo-4m4si
Related
I have an MUI DatePicker component that is inside of an MUI drawer component. When you click on the date picker to pull up the calendar popup, it is rendering beneath the drawer.
I have tried to set the zIndex of the popper component through PopperProps but have had no luck.
In order to have the Popper show above the drawer component you need to supply to PopperProps an object with style property set to a high zIndex value. This value seemed to work perfectly fine for me.
<DatePicker
{...props}
PopperProps={{
style: { zIndex: 1000000}}}
/>
I am using an ant design modal on my site which is internationalized. The modal works fine for all languages except Arabic. When it is on Arabic, when you click the 'next' button, it should show you the next page of the modal, but it just shows a blank modal. I suspect because Arabic is a RTL language, this issue would be solved if I could get the modal to slide in the other direction when the user hits next. I see on Ant Design's documentation they have some mention of RTL functionality on the modal page, but I'm not sure how to implement it. It says
Modal.method() RTL mode only supports hooks.
but i'm not sure what it means by that.
On this configuration page it mentions a direction prop, but I passed it a string "rtl" and that didn't seem to have an effect. It says the prop type should be rtl or ltr, so it shouldn't take a string?
Use configProvider and wrap all antd components in it with direction="rtl". you can also apply it conditionally: direction={condition ? "rtl" : "ltr"}.
import { ConfigProvider } from 'antd';
// ...
export default () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
Reference: https://ant.design/components/config-provider/?theme=dark#header
I am trying to add a button to the Material UI autocomplete paper by overriding the PaperComponent prop and added a button at the button of the paper, but clicking on the button automatically closes the autocomplete search results
How can i prevent the autocomplete search results Paper from closing on click
Here is a sandbox: https://codesandbox.io/s/material-demo-mxjyi
UPDATE: I didn't notice that the sandbox did not save, now you can see the issue
The problem is the onBlur which occurs before your onClick. Material UI offers to ignore the blur behaviour on debug mode but that happens only if you have a value inside your Autocomplete.
The workaround is to use onMouseDown instead of onClick
Based on your Codesanbox please change the onClick event to onMouseDown event in your <button> component
<button
style={{ margin: "10px", padding: "5px" }}
onMouseDown={() => alert("clicked")}
>
The problem, which is not Material-UI related, was discussed here also
using onMouseDown on the button is not the proper solution here as the user is expecting a different behavior. You can call preventDefault on the paper component to prevent it from closing.
<Autocomplete
//other props...
PaperComponent={(props) => (
<Paper onMouseDown={event => event.preventDefault()}>
<Button>Click</Button>
</Paper>
)}
/>
Is it possible that the Material UI api docs are out of date? Or is there another place to check for element preferences?
i.e. MenuList https://material-ui.com/api/menu-list/ has a property disablePadding to disable the top and bottom padding of the element, but there is no apparent documentation on that.
import { MenuList } from "#material-ui/core";
...
<MenuList disablePadding> ... </MenuList>
disablePadding is from the List component.
In the Inheritance portion:
The properties of the List component are also available.
I am trying to add labels to nested <SpeedDialAction /> components, and have button text displayed next to icons like so:
but it seems like children do not get rendered:
...
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={this.handleClick}
>
Foo
</SpeedDialAction>
...
I also tried using the ButtonProps prop as listed in the docs but that did not do the trick either.
I take a look at the SpeedDialAction source code https://github.com/mui-org/material-ui/blob/6f9eecf48baca339a6b15c5fcfb683cba11e4871/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
The title of Tooltip only shows on hover, but it can be easily done by changing default state to true, eg: state={ tooltipOpen: true } in SpeedDialAction.js file.
However, Tooltip component in SpeedDialAction has no reference, so there is no easy way to setState from outside.
The easiest solution is to create a custom SpeedDialAction component.
SpeedDialAction component contents only Tooltip and Button, which it's hard to modify.
There is the codesandbox https://codesandbox.io/s/9zpyj4o0zo
You can simply add SpeedDialAction.js file to your project.
Update:
Removed onClose event in Tooltip in codesandobox. Fixed the problem where title disappear after click.