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?
Related
Now I am not entirely sure what confluence of things brought this issue to a head, but lets start with my minimal reproduction
What am I trying to do
I want to show a styled element that is composed from various "inherited" members inside of a modal. Once the element is clicked, it will dismiss the modal.
Actual results
For some reason the element triggers it's onClick early, as soon as you click the button that is actually supposed to open the modal. It is only because it's a styled component (I think). If I change the element from a Para to a normal p, it behaves correctly.
I'm wondering, what can cause this? Is it that I nested too much? The error I get is
Warning: Cannot update a component (`App`) while rendering a different component (`Styled(Styled(styled.div))`). To locate the bad setState() call inside `Styled(Styled(styled.div))`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
The issue here is that you're spreading ...rest in your Para styled-component. Remove it from ./Para.js and it should work as expected
So I'm trying to understand how to move focus when a new page loads in my application. This question came to my mind: what could I do if I want to focus on some element that is somewhere outside of my component. It seems to me that everywhere they write about the focus it's always used with refs. You can pass ref to a child. What if I want to focus on element to reset the focus on the page when a link is clicked and new page component is loaded? Or if I want to make skip link component higher in the tree and focus on a header in element? I have a lot of components, it doesn't seem a great idea to pass refs down through several components.
I feel like I'm missing something.
I'm interested about this because I'm learning about accessibility and how to make possible to navigate page only with keyboard.
what could I do if I want to focus on some element that is somewhere
outside of my component.
What if I want to focus on element to reset the focus on the page when
a link is clicked and new page component is loaded?
You can just pass callback of focus handler into your inner component and call it when you want.
I have made a navbar, which holds a searchbar, and 3 icons.
On clicking these icons, a modal is rendered.
I wanted help with two things.
Closing the modals on outside clicks!, and
The hover element is slow because it has three states, every time it is called it re-renders the code from bottom to top. I wanted the hover to have one state assigned to one parent element. But on doing that, the hover effect for all three buttons gets activated at the same time.
Code is up on : https://codesandbox.io/s/unruffled-snowflake-he95w
Please feel free to edit the code and pass me the edited fork.
I have tried handleBlur, passing an event, and eventListener.
https://codesandbox.io/s/unruffled-snowflake-he95w
Expected - Modal rendered on screen should get disappeared on clicking outside the modal.
P.S - semantic UI icons are not rendering, but they are there. They will activate if you hover over them.
Credits - SVG close icon problem solved by Drew Reese.
Ah, I see. Your ToolBar is the controlling component, i.e. the state about whether or not each toolbar item is open is stored there. You need to pass a close handler to the children components so when a "close" button is clicked it is calling the callback the parent passed in.
Here is a fork of your sandbox where I pass in an onCloseClick callback to the calendar/picker thing that simply toggles that state value back to false to close it. The picker then just assigns that callback as its onClick handler for the contaning for the close button.
You can apply the same logic to the other two components.
Note: since the icons aren't rendering for me either I added some text to the buttons so they are easier to find/see.
I am using React DnD to handle dragging and dropping in a React app. I am using the touch backend. In this implementation, I am using a custom drag preview. While dragging, I hide the element that is "being dragged" by animating its max-height to 0. The custom drag preview shows as the user drags. If the user drops the element in an area that is not allowed, the item "being dragged" animates back to it's original height. This is good.
When the item is dropped, I send a redux action that reorders the list of items and puts the previously dragged element into its new location.
However, there is a moment where the dragged item flashes in its current location before the DOM updates and animates the item in its new location.
The max height animations are controlled by CSS classes that are added and removed when isDragging is true.
I have scoured the React DnD docs and examples (which are generally very thorough) and looked at some other open-source projects that have used React DnD, but cannot seem to locate the solution. I'm assuming I am missing something simple like a prop that I can pass. Essentially, I would like isDragging to stay true until the drop action is complete or be able to update a prop in either the endDrag method on the draggable target or the drop function on the droppable target.
I could use vanilla javascript to update the classList inside the endDrag method, but would prefer to use React tools if possible.
Has anyone encountered this issue?
I was able to get around this problem by fixing a known issue with Touch events stopping when a DOM node is unmounted in React.
https://github.com/yahoo/react-dnd-touch-backend/issues/31
In this solution, you create a copy of the DOM node that has the touch event attached to it so that it remains even if React unmounts the component as elements are added and removed during dragging.
I am attempting to prevent clicks on a React Bootstrap popover from bubbling up and triggering the onClick handler on a parent element. Using the standard event.stopPropagation() does not, in fact, stop propagation, nor does its native counterpart:
Please see the working reduced test case on JSBin.
My current approach (within the parent's onClick event) is to check if the target element is inside the popover's DOM tree (using jQuery.has for convenience):
function onParentClicked(e) {
if (!$(this.refs.parentElement).has(e.target)) {
// click did NOT originate from popover
}
}
This approach mostly works, but seems like a hacky workaround for simply using stopPropagation in the child's onClick handler.
Is this possibly a React Bootstrap bug? Or am I missing something in how I should be handling this logic?
You could try putting Popover outside the parent div?