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.
Related
Is there a native MUI event for when the pre-selection value changes in a MUI:Select component?
For example, here is my MUI:Select component with 3 options:
I would like an event for when 'Public', 'Restricted' or 'Private' is pre-selected (but not actually selected; i.e. before the onChange() event), either with a mouse-over event or a keyboard up/down event. This is because I have a tooltip card that needs to change dynamically for the user as they interact with the options.
Using this example https://codesandbox.io/s/3iv96 as a guide, I implemented a bespoke solution by capturing the mouse-over event and extracting the text value. I just realized I have forgotten to handle key up/down.
So the question becomes whether I have just missed the obvious, or do I need to roll my own component by wrapping MUI:Select and publishing the events I need.
Looks like out of the box this isn't supported.
Looking at this thread https://github.com/JedWatson/react-select/issues/745 it has to be done manually.
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'm trying to figure out how to work around what appears to be greedy-focus issues with react-select.
I'm using custom components in my MenuList component that need the focus to work (rc-slider). Basically, I'd like the select to support an additional value for each option and I'm using a Slider to do that.
The issue with the sliders is that I can click on them to change the value, but can't drag the handles, as the Select seems to take back the focus (and even close the drop-down if menuIsOpen is not controlled).
The select does need to re-render when the values change, but I can't figure out why the focus has to change.
https://codesandbox.io/s/epic-moon-cv33b
Demo Fiddle
I'd like to show some help text using a popover for the entire group of fields, not for each individual input.
In the fiddle, I'm simply using a mouseenter trigger to show how it should look like, but what I really want is to trigger it on focus for any input, but have the popover be positioned based on the parent element.
In non-angular land, I'd trigger a custom event (say groupenter) when any one of the fields is in focus, and have the popover listen to that event. I'd also debounce the corresponding groupleave event so the popover won't flicker as I tab around the inputs.
What's an angular-y way to accomplish that here?
(I think this patch helps, but it just got committed days ago)
Got it working!
I had to fork tooltip.js to add 'groupenter': 'groupleave' to triggerMap since there's no public api to add to the map.
I have a problem regarding combobox dropdown. Once a dropdown is opened, if I want to move focus to other control (say a textbox), I need to click twice because on first click, the combo dropdown is closed and then on second click, the textbox gets focus. How should I fix this? Please help.
You could listen to the DropDownList.SelectedIndexChanged event, and in the event handler set focus to the next control, either by setting TextBox.Focus(), or by calling System.Windows.Forms.Control.SelectNextControl()
I think this would be 'non standard' behaviour for what its worth. Its quite normal to expect the user to tab or select the next control after using a drop down.
Edit: Sorry, in a WPF ComboBox the equivalent event is SelectionChanged, but on reflection you'd be better using OnDropDownClosed. This would mean you only move the focus specifically after using the drop down rather than just whenever the value changes.