I use Sveltestrap and need a double click handler for a row:
<ListGroupItem on:dblclick={handler(params)}>
<Row>
<Col><Icon name=........</Col>
...
</Row>
</ListGroupItem>
When I add a Button below, on:click works as expected. I also checked that virtually any HTML component can have an on click / on double click event.
Components != DOM Elements.
You can only use events that are dispatched from the component or forwarded from within. ListGroupItem does not forward dblclick, only click.
As a workaround you can try adding a wrapper div with the event on it.
Note that all mouse actions should also be accessible via keyboard. Also, double click is a fairly uncommon gesture on the web, which may not be expected to exist by users.
Related
In a small edit form, I prepopulate the Input elements with text values. I then monitor the changes with each element's onChange event.
One strange phenomenon my QA colleague just discovered is that if you initially select all of the text (ie. Cmd-A or Ctrl-A) and then press Backspace or Delete, the onChange event is not fired.
This seems like a bug/defect in the browser or in React?
I'm going to combat it by adding an onKeyUp event handler for every Input element, looking for the Backspace (ASCII 8) or Delete (ASCII 46) codes.
Update:
It appears the root cause is my use of the defaultValue property, as in this example:
<Form.Control as='input'
defaultValue={location}
placeholder='Enter Location'
onChange={e => handleChange(e)}
/>
With this code, the onChange event will not fire if the steps above are followed. But if defaultValue is changed to value then everything works fine.
I updated my question that provides an explanation.
I'm not going to use the defaultValue of an Input element anymore!
I have a Search component which has an input field inside. All elements inside it receive the onKeyDown event bubbling. However, when I use the component, it doesn't listen to the event. It's parent, however does.
In the example below, when I press a key inside the search field, it prints 'parent', but it doesn't print 'component'
<div className="xyz" onKeyDown={(e)=>console.log('parent')}>
<Search onKeyDown={(e)=>console.log('component')}/>
</div>
Is this expected behavior? Am I missing something?
Here is a working fiddle https://jsfiddle.net/69z2wepo/80974/
to test, open the console, select the input and click any keyboard key.
Notice the console.log in the component declaration never fires, but it's parent does.
When you write <Search onKeyDown={(e)=>console.log('component')}/> you don't set onKeyDown event listener on Search component. You are actually passing onKeyDown property to the component. So then you can write in your Search component:
return <div onKeyDown={this.props.onKeyDown}>
...
In DOM structure your Search component is a <div> element in which you wrap your <input>. So if you want to set listener on Search component, set it on <div>-wrapper inside of it.
Virtual DOM persists the structure of the original DOM and checks for its changes (it just watches a view part of the DOM). It doesn't care about event listeners.
Here is a modified version of the fiddle, that does what you wanted: https://jsfiddle.net/69z2wepo/81069/
Thank you for taking the time for reading my question.
A "range" input element in HTML (Slider) fires an onchange -event, in which the content of a span element gets updated with the current value of the input element.
Somehow, the first change made to the input element doesn't fire the onchange event. When an 'onclick' event is used, it does fire.
Here's the code, HTML first:
<div>
<input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
<span id="main_options_plug1_lengthPE_value"> … </span>
</div>
And now JavaScript:
function setOpenEndPELength(plug)
{
if (plug == "plug1" || plug == "plug2")
{
var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
var span = document.getElementById("main_options_" + plug + "_lengthPE_value");
span.innerHTML = slider.value + " mm";
}
}
I created a JSFiddle, so you can try it yourself.
I didn't find an answer to this question on stackoverflow so far, any questions i found were about onchange event don't firing at all. In this case, it's only the first change that doesn't work.
Hope someone knows the answer. Any help is greatly appreciated, thanks in advance.
If I understand the question correctly, the problem is that on Firefox, the onchange handler is not executed when you press down mouse button when the cursor is on the button of the slider and move the mouse. It is executed only after you release the mouse button after such a move.
This seems to be the correct behavior (though some other browsers don’t comply), since HTML5 CR says about the change event: “if the element does not have an activation behavior defined but uses a user interface that involves an explicit commit action, then any time the user commits a change to the element's value or list of selected files, the user agent must queue a task to fire a simple event that bubbles named change at the input element.”
That’s a bit complicated formulation, but it is followed by a clarifying example: “A third example of a user interface with a commit action would be a Range controls that use a slider. While the user is dragging the control's knob, input events would fire whenever the position changed, whereas the change event would only fire when the user let go of the knob, committing to a specific value.”
The conclusion is that in this case, you should use the oninput attribute instead of onchange. In practice, onmousemove works too, but oninput is better, since it can be expected to work with input methods that do not use a mouse (whatever they might be, e.g. control by voice).
On document ready try to trigger event manually caused first time change is not occurred.
So just add code as below:
$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)
A little trick, if onchange doesn't fire the first time, add:
onclick="console.log(1)"
Some other action on the click, it still fire the onchange as second time but as first you have the click.
I'm making a grid control in HTML/JS and I'd like it to behave as much as possible like Excel. I've got most of the navigation and editing done already but there's one thing I can't figure out and everything I've found online didn't work in my case.
First I'm going to explain a bit how I've implemented it:
I've made the grid using a table and inserted a textbox in each td. The textboxes do not get the focus unless you double click in the cell (much like in Excel). In other words, clicking a cell simply select it and you can edit it by double clicking. You can navigate around by using the arrow keys, this was done by attaching a keypress event handler on the document.
Now, when a cell is selected, I'd like to be able to start editing it simply by typing. To do this, I added some code in my event handler that controls the navigation that checks if the user is typing visible characters (e.charCode != 0) and set the focus in the textbox of the selected cell. That works fine except that the first character the user types isn't received by the textbox. Apparently .trigger is the way to go; here's what I've tried so far
self.editCell.trigger(jQuery.Event('keypress', {which: e.charCode}));
I tried passing more parameters like keyCode, charCode... etc without success.
So what would be the best way to pass the keystroke to the input control?
The only behavior that you are changing is that you want to navigate between other cells with the arrow keys, correct?
Instead of whitelisting actions, why don't you just let the native code handle the heavy lifting and only detect the usage of the arrow keys?
something like:
function cellKeyDown(e) {
if (e.keyCode > 36 && e.keyCode < 40) {
// select a new cell
}
}
I have following structure of web application, for which I'm automating testing:
<em unselectable="on" class="x-btn-split">
<button type="button" class="x-btn-text " id="ext-gen523" title="Add Options">Add</button>
</em>
Both objects has event listeners,added viw JavaScript in some linked js-file (I don't know what file exactly).
After clicking on button "Add" with mouse, calls AJAX function calls and row adding to some table, after clicking on em element, opens application menu.
I try to reproduce clicking on button ADD via VBScript (as I say, I'm automating testing of this application),instead of adding row into table, application menu opening. But I know exactly, that I'm clicking button Add, but not em-element.
PseudoCode, that do so:
set obj = domHelper.GetElementByClassName(container,"x-btn-text","button")
obj.click
Please, let me know If you know reasons for this behavior, because I'm really don't know what to think. (I've tried many different approaches to fix this, but nothing helped)
Thank you!
click, like most events, ‘bubbles’ up through all ancestor elements. When you click the <button>, yes, you're also clicking the <em> that contains it.
If the event handler for the <em> needs to know that the click was directly in the content area of the <em> but not any of its children, it should look at the event.target (srcElement in IE<9) property to check that the click is on itself, or not on the button, before opening a menu. Alternatively, if the button's click handler calls event.stopPropagation() (cancelBubble= true in IE<9), then the event will stop and not pass up any further.