How can I prevent the autofocus problem after tab is clicked? For example, when I clicked the tab and I scrolled down to the different div with selection, I opened and chose the options from selection. The focus kept returning to the tab that I clicked.
Undesired behavior
Desired behavior
Please let me know if this is something you can come up with solution to this problem.
It's hard to tell what exactly your problem is without seeing code, but you can control focus state using ref and accessing targets with refs. i.e.
const ref = React.useRef()
const toggleFocus = () => ref.current.focus()
return <input ref={ref} ... />
So, on open of a new tab, you could call "toggleFocus" (or whatever you call it) to focus the particular input you want to focus.
Hope that helps?
Related
We have a 3 section form & we are requiring the user to fill out this form in a particular order pictured below (1. From Bin, 2. Item, 3. To Bin). Upon entering the required info in a section, the next section should automatically appear with focus on the first input. These 3 sections are simply part of 1 react-hook-form.
We are noticing, however, that react-hook-form's setFocus function does not set focus on the first input when we change sections and we can not seem to determine why this is or how to make it do so. I've seen a couple setTimeout hacks, but this does not seem like the correct approach.
Here is a simple codesandbox we put together that replicates the issue.
Any help on this would be greatly appreciated!
I can only point you to the right direction - this issue is because the accordion items are hidden. If I expand them all by setting activeKey and then navigate through the inputs, it works. Accordion.Body has display=none when collapsed and you can't focus hidden elements.
I thought it would fix it, when I set focus in useEffect, after activeIndex has changed, but this didn't fix the problem:
useEffect(() => {
if (activeSection === 1) {
setFocus("itemID");
}
if (activeSection === 2) {
setFocus("binTo");
}
}, [activeSection, setFocus]);
There are also no re-renders, which could lead to loosing focus.
I know this seems simple, and the first instinct is going to be to suggest something like preventDefault in mousedown event. That is not what this question is.
In React, I just want to have an input that when Left Clicked receives its focus as normal, and when Right Clicked does not receive focus.
I can find no combination of event handlers or event manipulation that will allow this (in chrome at least). I'm tempted to put event handlers outside of the React DOM and get surgical with disabling higher up in the capture phase before react gets involved, but I'm just hoping I'm missing something and somebody can see something obvious I'm missing.
Here's various combinations of "everything" I've thrown at it. Synthetic event standard prevention, nativeEvent prevention, every variation of capture and bubble phase, etc. Event with all of the event handlers below, I can prevent Left Click from setting focus, but still Right Click sets focus on the input.
//React v16.12.0
function killEvent (e: React.SomeEvent<HTMLInputElement>): void {
e.nativeEvent.stopImmediatePropagation();
e.nativeEvent.preventDefault();
//[Neither above nor below seems to work]
e.preventDefault();
e.stopPropagation();
}
<input
onContextMenuCapture={killEvent}
onContextMenu={killEvent}
onClick={killEvent}
onClickCapture={killEvent}
onAuxClick={killEvent}
onAuxClickCapture={killEvent}
onPointerDown={killEvent}
onPointerDownCapture={killEvent}
onMouseDownCapture={killEvent}
onMouseDown={killEvent}
onFocusCapture={killEvent}
onFocus={killEvent}
/>
here is my solution
Capture on mouse down
<input onMouseDown={this.killEvent} />
then check which button is clicked
killEvent = e => {
if (e.nativeEvent.which === 3) {
e.nativeEvent.preventDefault();
}
};
I have a Dropdown, I select a value, lets say "myName", then I have a button that I click and it will display a form to fill with "myName" in one of the fields. But there is a UI issue. When I click that form button it display the form but the Dropdown selected item will disappear.
I tried debugging and it seems there is an issue when rendering it for second time. it fails in a function called commitRoot(root, finishedWork); in react-dom.js file and I don't know what it means as i'm very new in this area.
render() {
return (
<Dropdown
className='titlebar__dropdown'
options={this.myOptions}
onChange={this.selectedNameChanged}
selectedKey={PlanSelector.selectedName}
placeholder='Select a Plan'
/>
before clicking the form:
After clicking, and it doesn't show the options anymore:
You are probably overwriting the state of the property holding the value of the dropdown.
Make sure it is not again set to "" as you must have kept.
On the click of the button, the state is changed and as a result, render() is ran again because of which it is getting overwritten make sure to hold your state when the button is clicked and check if you are changing the state of selectedNameChanged property.
Hopefully, this helps,if not can you please provide the method which is called on button click.
Thanks
The Scenario
I am using the Reactour library to create a guided tutorial on my website. The library allows me to interact with highlighted components, which is the desired behavior. However, my input boxes have a onBlur attribute that updates the state in a parent component, thus re-rendering the child (component where the input boxes are).
The Issue
The problem is that this re-render is messing up the focus and the user is not able to "tab" between fields (when the tutorial is open). It seems that the Reactour component is receiving the focus after the re-render, even though they have a tabIndex="-1" set by default in their component.
My Approach
I tried to set explicit tabIndex properties, but that didn't work.
I thought about having an onKeyDown listener, check if the pressed key is tab and "manually" control the focus between fields, but that seems too hacky and messy, considering I have a lot of fields in my form.
I made a CodeSandbox here to reproduce the bug. You will notice that you can tab between inputs when the Tutorial is closed, but clicking the "Start Tour" button will mess the tabIndex behavior.
Any ideas?
Just for reference, this seems to be an issue with Reactour and it was logged here. Hopefully, it will be fixed soon.
For now, as a workaround, my solution was to manually set the tabIndex of Reactour components during initialization:
setTimeout(() => {
const elements = document.querySelectorAll("#___reactour button");
elements.forEach((el) => (el.tabIndex = -1));
}, 100);
The timeout is necessary since it takes a little bit for the elements to show up in the screen.
I've added ScaleImageLabel to swipe Tabs. I want to calculate amount of time each tab remains in focus. I added focus listener to Tabs/ScaleImageLabel but it's not getting fired. It's working when added to the form. Any suggestions on how to achieve it?
If I understand correctly what you need is a tab selection listener. Focus listener will only work for focusable components and labels are by default non-focusable. I would recommend avoiding it since focus is used for key based navigation. It might produce different results than you would expect.