i have a container div that contains many inputs and checkboxes inside, i want to trigger an onBlur event only when the container div loses focus, instead the onBlur event is triggered everytime any element inside it loses focus
React documents this problem by utilizing the event loop with a setTimeout function with an empty second argument.
Related
I need to fire onBlur event for p-dropdown. I need this to be fired only when the dropdown looses focus. But its firing onBlur event even when I click on dropdown. I know there is 'onSelect' event but I cant use that.
My requirement is, User can either select a dropdown value or can enter any text which is not in dropdown. I need to save the info into DB.
I tried putting a settime but its not working out.
I have a TextInput component with a List Item component that displays a list of search suggestions below it, similar to an AutoComplete. The issue is when I click one of the suggestions from the list it first fires the onBlur method of the TextInput and requires a second press before it fires the onPress method. How do I call the onPress method in one tap? I don't want it to blur if I'm pressing a dropdown list item.
I'm using react-window to optimize a custom dropdown menu component. The dropdown's menu uses the List component from react-window to render a ul, and the item component passed to the List renders an li element with an onClick handler assigned (to close the menu and pick an item). The dropdown component worked fine before I used react-window, but after switching, the onClick handler does not fire the first time each li element is clicked.
Investigating the li in Chrome's dev tools revealed that after the li node is first mounted, React attaches an noop event handler to the node's onclick property, apparently due to some iOS Safari bug (here). After clicking the node once, this goes away and my onClick handler fires properly.
If I change the event to onMouseUp, it works fine, but I shouldn't have to do that; I should be able to use onClick and have it fire reliably.
I'd like to file a bug report on this, but I'm not entirely sure if it's React's fault or react-window's fault. I looked through the source of react-window and it doesn't seem to do anything strange to render the item component; it just uses createElement. Obviously onClick events work for some elements, including my li elements before I moved to react-window...somehow the noop event handler wasn't affecting them beforehand.
Is anyone else familiar with this particular iOS workaround and why it's suddenly breaking my event handlers?
I have problem with using redux-form as a server filter. Purpose of the form is on every field change send request to server with actual form values for filtering data in table.
I tried to do it with onChange event attached to "form", then in onChanged event is handleSubmit called. It works until i used it with my custom Field component.
When onChanged is used with custom component, then form onChange event is not fired. It is fired only when is normal field "input" edited.
Is this bug? Are there another ways to submit form after any field change is done? I tried to do it with formValueSelector but comparing values of form every rerender is not optimal.
Example is here https://codesandbox.io/s/98z3kjk12y
The problem is in custom component, namely that it is div - not an element that have onchange event. Honestly, it was something new for me that form has onChange event, but it seems it is fired when any form's child element with onchange event is triggered.
If you try to replace in MyStrangeInput div element with, for example <input type="text"> onFormChange will fired.
As a very, very, very dirty workaround you can customize checkbox with button styles so onFormChange will fired(because checkbox onchange event).
Unfortunately(or fortunately?) redux-form doesn't have handleChange props, so as i see the most clear solution here will be to call onFormChange on each form's field change.
Updated example
In my React component I have a click event handler on the component's root element. I need to prevent this event bubbling when the user clicks a certain child element but also allow the double click to highlight the inner text as it would do usually.
I have tried to attach a click handler to the child element and call event.stopPropagation() which does prevent the parent click handler from firing but doing a double-click does not highlight the text.
Is there a way to do this?
Footnote: After writing this question I wonder if the only way is to use createTextRange()