I'm using the material-ui lib and I need to have an autocomplete where each item inside that autocomplete is clickable and opens a modal.
The structure in general is:
const ModalBtn = () => {
...
return (
<>
<button ... (on click set modal to open)
<Modal ...
</>
);
}
const AutoCompleteWithBtns = () => {
return (
<Autocomplete
renderTags={(value, getTagProps) =>
value.map((option, index) => <ModalBtn />)
}
...
/>
);
}
Note that the ModalBtn is a component that cannot be divided into two components of Button and Modal.
The issue is that when you click on the button inside the modal - the focus is kept inside the autocomplete, and the modal will never gets the focus (if I have an input inside the modal - I can't write anything inside).
Tried all the standard autocomplete/modal focus-related props (disableEnforceFocus, disableEnforceFocus, etc...) but nothing works.
Here is a working codesandbox example. As you can see - if you click on the button that is not inside the autocomplete component - everything works (you can add text inside the input field). If you click on the button that is inside the autocomplete - the input field inside the modal is not editable (you lose focus).
Here is an example of the issue:
The problem with having the Modal rendered from within the Autocomplete is that events propagate from the Modal to the Autocomplete. In particular, click and mouse-down events are both handled by Autocomplete in a manner that causes problems in your case. This is primarily logic intended to keep focus in the right place as you interact with different parts of the Autocomplete.
Below (from https://github.com/mui-org/material-ui/blob/v4.9.11/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js#L842) is the portion of the Autocomplete code that is getting in your way:
// Prevent input blur when interacting with the combobox
const handleMouseDown = (event) => {
if (event.target.getAttribute('id') !== id) {
event.preventDefault();
}
};
// Focus the input when interacting with the combobox
const handleClick = () => {
inputRef.current.focus();
if (
selectOnFocus &&
firstFocus.current &&
inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
) {
inputRef.current.select();
}
firstFocus.current = false;
};
The default browser behavior when a mouse down event occurs on a focusable element is for that element to receive focus, but the mouse-down handler for Autocomplete calls event.preventDefault() which prevents this default behavior and thus prevents a focus change from the mouse-down event (so focus stays on the Modal itself as indicated by its blue focus outline). You can however successfully move focus to the Modal's TextField using the tab key, since nothing is preventing that mechanism of focus change.
The Autocomplete click handler is keeping focus on the input of the Autocomplete even if you click some other part of the Autocomplete. When your Modal is open, the effect of this is that when you click in the Modal, focus is moved briefly to the Autocomplete input element, but the focus is immediately returned to the Modal due to its "enforce focus" functionality. If you add the disableEnforceFocus property to the Modal, you'll see that when you click in the Modal (e.g. on the TextField) the cursor remains in the input of the Autocomplete.
The fix is to make sure that these two events do NOT propagate beyond the Modal. By calling event.stopPropagation() for both the click and mouse-down events on the Modal, it prevents the Autocomplete functionality for these two events from being executed when these events occur within the Modal.
<Modal
onClick={event => event.stopPropagation()}
onMouseDown={event => event.stopPropagation()}
...
Related answer: How can I create a clickable first option in Material UI Labs Autocomplete
The problem in your code was that the Modal was rendered from within the tag of the AutoComplete component, which was not ok because of the visibility of the components, the hierarchy of the components was the issue.
The fix is to move the Modal within the FixedTags component and pass the open handler to the ModalBtn in the renderTags prop;
I've updated your sandbox with a working variant HERE
The changes are below
const ModalBtn = ({ handleOpen }) => (
<button type="button" onClick={handleOpen}>
Open Modal (not working)
</button>
);
const FixedTags = function() {
const classes = useStyles();
const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<Autocomplete
multiple
options={autoCompleteItems}
getOptionLabel={option => option.title}
defaultValue={[autoCompleteItems[1], autoCompleteItems[2]]}
renderTags={(value, getTagProps) =>
value.map((option, index) => <ModalBtn handleOpen={handleOpen} />)
}
style={{ width: 500 }}
renderInput={params => (
<TextField
{...params}
label="Fixed tag"
variant="outlined"
placeholder="items..."
/>
)}
/>
<Modal open={open} onClose={handleClose}>
<div style={modalStyle} className={classes.paper}>
<h2 style={{ color: "red" }}>This one doesn't work</h2>
<p>Text field is not available</p>
<TextField label="Filled" variant="filled" /> <br />
<br />
<br />
<FixedTags label="Standard" />
</div>
</Modal>
</>
);
};
Related
I have rjsf version ^5.0.0-beta.10 installed in package.json and am able to render a proper Form using react-jsonschema-form. The problem is that I'm using ObjectFieldTemplate and every time I enter a character in one of the string input boxes, the box goes out of focus and I have to click on the box again to be able to type anything.
I have read https://github.com/rjsf-team/react-jsonschema-form/issues/2106, which suggested me to move the ObjectFieldTemplate outside of the custom Form definition. I did that and it does not work. I have also read Custom widget with input loses focus in react-jsonschema-form when formData is passed as a prop to the form, which is an advice about setting state, but I'm using functional components rather than class components, so I'm not sure if it's applicable.
The code looks like:
import validator from "#rjsf/validator-ajv6";
import Form from "#rjsf/mui";
const ObjectFieldTemplate = (props) => {
// some logic to be computed
return (
<div>
<h3>{props.title}</h3>
<p>{props.description}</p>
{props.properties.map(function (field) {
// logic to determine the style
return (<fieldset style={style} key={uuidv4()}>{field.content}</fieldset>);
})}
</div>
);
}
const JsonSchemaForm = (props) => {
// define schema and uiSchema
const onSubmit = ({formData}, e) => {
// some logic
}
const onError = (errors) => {console.log(errors);}
return (<Form
schema={schema}
validator={validator}
formData={data}
uiSchema={uiSchema}
onSubmit={onSubmit}
onError={onError}
templates={{ ObjectFieldTemplate }}
/>);
}
Solved. I'm not sure why, but it appears that setting key={uuidv4()} is an expensive computation step that forces the input box to be out of focus.
i have a simple buttoN.
<Button id='button1' disabled onClick={() => buttonClick(false)}variant="contained">Text</Button>
This button is rendered as a grayed out version of itself, which is good.
Now, I want to enable the button. It should be:
document.getElementById("button1").disabled = false;
But nothing is enabled again.
What is the issue here?
Generally, you should avoid using document.getElementById and similar in React whenever possible.
To make your button enable, do the following:
const [isDisabled, setIsDisabled] = useState(true);
return (
<>
<Button id='button1' disabled={isDisabled} onClick={() => buttonClick(false)}variant="contained">Text</Button>
<div onClick={() => setIsDisabled(value => !value)}>toggle disabled</div>
</>
)
I encountered a weird problem while creating a form with React (it is most likely not specific to React however). The form consists of an input, an error hint underneath it and a button, all vertically stacked. The input is focused on component mount, and the error hint might appear when the user clicks outside of the input. When the input is focused and the user tries to click the button, it loses the focus which may cause the hint to appear. The hint pushes the button downwards which prevents the button's click event from registering, resulting in a bad user experience.
Is there a way force the button to get clicked before the input loses focus?
I have replicated this situation here: https://jsfiddle.net/tacticalteapot/b40hLv3c/4/
Code from the fiddle:
function App() {
const ref = React.useRef(null);
const [showLabel, setShowLabel] = React.useState(false);
const [clicked, setClicked] = React.useState(false);
React.useEffect(() => {
ref.current.focus();
}, []);
return (
<div>
<input ref={ref} onBlur={() => setShowLabel(true)} />
<div>
{showLabel && <label>a label appeared that moved the button</label>}
</div>
<div>
<button onClick={() => setClicked(true)}>
CLICK ME
</button>
</div>
{clicked && <h6 style={{color: 'red'}}>CLICKED</h6>}
</div>)
}
This is happening because of the order of events. onBlur fires first which immediately shows the label. The <label> is rendered directly "on top" of the button. Your click event never registers. To test this, try setting height for your label or even wrap it in another container with a height. Alternatively, add padding to your button such that it's not fully covered by the <label> - it'll register.
Obviously there are better styling methods for this.
function App() {
const ref = React.useRef(null);
const [showLabel, setShowLabel] = React.useState(false);
const [clicked, setClicked] = React.useState(false);
React.useEffect(() => {
ref.current.focus();
}, []);
handleClick = () => {
setClicked(true);
}
return (
<div>
<input ref={ref} onBlur={() => setShowLabel(true)} />
<div className="test">
{showLabel && <label>a label appeared that moved the button</label>}
</div>
<div>
<button style={{padding: "30px"}} onClick={() => handleClick()}>
CLICK ME
</button>
</div>
{clicked && <h6 style={{color: 'red'}}>CLICKED</h6>}
</div>)
}
ReactDOM.render(<App/>, document.getElementById('app'));
I don't think there is a problem with focus. Try using Tab, button gets focused correctly.
Problem is with the UX itself and how the page is pushed down by validation messages.
It would be the best to change the UX slightly to allow the space for validation errors without pushing any elements below:
https://jsfiddle.net/eucj04np/5/
Also, remember to add aria-describedby that points to the id of the element with error validation message. This will help assistive technologies to read out the error content once element is focused.
I´m using material ui and react grid from dev extreme to create a table with a input of type date, but when I try to type the date it doesn't recognize the value change until I get to the year value, which cleans the other values. Any Idea of what could be happening?
My Code:
const DateEditor = ({ value, onValueChange }) => {
return (
<TextField
value={value}
type="date"
onChange={event => {
onValueChange(event.target.value)
console.log(event.target.value)
}}
/>
);
};
const DateTypeProvider = React.memo(props => (
<DataTypeProvider
formatterComponent={DateFormatter}
editorComponent={DateEditor}
{...props}
/>
));
Nothing showing.
Showing when getting to year.
Deleting everything when I type next value.
Obs: It works perfectly when I select by the calendar.
just remove value props from the TextField
You should use event.originalTarget Instead of event.target Because originalTarget refers to the element the event is attached to.
target Can change for example for a click event: target Is the inner element that was clicked but not the base element
When I click on the image I want that it is automatically scrolled to the component which is then displayed. I tried with anchor tags, but it's not working (I believe due to the fact that the component is hidden and at the same time when it is shown it should be scrolled to it ) , useRef - I get the error 'not defined' (I believe same reason as above).
Component is displyed onClick, but it does't scroll to the view-port of the user. Pls help, I'm out of the ideas :/
const WebContent = () => {
const [hidden, setHidden] = useState(false)
return (
<div>
<img onClick={() => setHidden(true)} src={first}/>
<div>
{hidden && <MyComponent/>}
</div>
</div>
)}
Your intuition is probably right that MyComponent is not yet mounted when you try to scroll to it. A simple way to do this would be to have MyComponent scroll itself into view when it mounts, if that's the behavior you're looking for.
const MyComponent = () => {
const ref = React.useRef(null);
useEffect(() => {
if (ref.current) ref.current.scrollIntoView();
}, [ref]);
return (
<div ref={ref}>
NOW YOU SEE ME
</div>
);
};
export default MyComponent;
One (hacky?) idea is add the ref to the surrounding div of the hidden content:
this.scrollHere = React.useRef(null);
...
return (
<div style={{ minHeight: 1 }} ref={this.scrollHere}>
{hidden && <div>My Hidden Component</div>}
</div>
)
Then you can run a function onClick, which sets hidden to true (which by the way is kinda irritating. Maybe just use "shown" as a quick improvement) and also lets the ref scrollIntoView:
const showAndScroll = () => {
setHidden(true);
this.scrollHere.current.scrollIntoView({
behavior: "smooth"
});
};
The minHeight has to be placed on the div since it is at height of 0 first and this messes with the scroll function (it scrolls below the hidden content).
See working example here.