I need the browser to respond to keydown arrow events in focused scrollable boxes.
Here is a Plunker to show what I mean
http://plnkr.co/edit/Okch5dEByFkueJl0DmwG
Even if I tell the event to stop propagating with event.stopPropagation()
and make the event handler return false the box keeps scrolling on keydown.
Unless I'm mistaken as far as what you're looking for, you should just be able to change your
event.stopPropagation()
back to
event.preventDefault()
and it will work as desired.
Related
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();
}
};
In react select onBlur event or onMenuClose event is triggered when user selects the option or blur (click outside of the control).
So I want to perform the business logic on blur event if user has not selected an option.
In other words I want to know how blur event is triggered.
onBlur event is triggered when the focusable HTML Element loses focus. Maybe it's easiest to see if select option was changed? Don't know how your implementation looks though but maybe this will help you.
I read this good article about Routed Events, and I understood why we need sometimes bubble Events and sometime we need tunnel Events.
What I didn't understand is, when we use the tunnel Event, why after it is handled or reached to the source element, still the bubble event is launched?
Thanks in advance!
The article says that if you put an image on a button, and that image is clicked, the tunnel event for that image will fire. But it is highly likely that you would also want to handle that click as if the button itself was clicked, so a bubble event is also fired which bubbles up to the click event on the button itself (because the button owns the image), so that you can treat the image click like a button click, using the usual event handler for the button.
I would also like to add that the event for both (Tunnel and Bubble) are different.
For tunnel, we use PreviewXXX (eg: PreviewMouseDown) and for bubble event we use XXX (eg: MouseDown) event.
By sequence, Tunnel event gets fired first starting from the root of the application and ends at the source. And the Bubble event is triggered.
It makes perfect sense to have both these events.
I cant get mouseleave to fire inside a ribboncombobox inside a ribboncontrolgroup inside ribbon tab inside a ribbon.
I have a behavior that on mouse enter opens the dropdown and should close it on mouseleave
except mouseleave doesnt fire I verified this using snoop and by setting a breakpoint on the event.
Any ideas or workarounds?
I was having a similiar issue with the border control - and I found an event called, "IsMouseDirectlyOverChanged" - that seemed to fire pretty regularily so I used that.
In my surface application I have a SurfaceWindow with a SurfaceUserControl on. On the SurfaceUserControl I have a SurfaceButton but the ContactUp (and down) event is not fired. The ContactHoldGesture event is fired though.
Any ideas?
Could you include some code to reproduce? Where are you subscribing to those events?
Most likely what's happening is the contact up and down events are being handled by the button, so they don't fire at the usercontrol level. Try looking at the previewcontactup and previewcontactdown events.
ContactUp and ContactDown are handled by the button itself - that's why the events never get to your code. If you really want to intercept these events, use PreviewContactUp/PreviewContactDown instead. What you probably really need though is to just handle the Click event on the button. Adjust the ClickMode property of the button if you want to change what causes the Click event to be raised.