These are chat archives for StephanHoyer/mithril-query

17th
Dec 2015
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 20:48
@StephanHoyer I've been using mithril-query since your recommendation last month and so far it has been great. I just have one issue currently... whenever I try to trigger a keypress, an error is thrown. Other events like .click and .setValue work fine, though. In my keypress handler, I take in the event (e) as a parameter and then just need access to e.which and e.target.value. It seems like the latter is causing this error... the error I get it Cannot read property 'value' of undefined.
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:12
Can you post an example so I can preproduce this
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:20
Sure, is there a cdn version of mithril-query that I can import to jsFiddle?
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:25
hmm... I don't know if jsFiddle allows for commonjs style exports
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:27
I think not
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:27
In that case I'll just make a repo that you can clone
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:27
you can simple post a snippet
should be enought for a first look
I think I already found the problem
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:35
what do you expect on e.target.value
seems browser don't have a value there
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:37
Sure, so without the failing test in place, you can see in the console that I expect the value of the input (in this case 'test' to be displayed, as well as the keycode of whatever you press)
https://jsfiddle.net/oLq1gmkx/
Cannot read property 'value' of undefined from the tests makes it seem like e.target is for whatever reason undefined
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:41
yes it is
never needed it personally
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:42
How do you read the value from the input without it?
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:42
oninput at the input field
it's triggered for keypress, copy paste and drag&drop
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:43
I am using that as well--there is just a specific case where I need to capture the "enter" key first
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:44
but why you also need the value in that very case
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:44
Based on the value, I either allow or don't allow "enter" to perform its normal action
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:44
BTW: which is provided as keyCode
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:45
That is good to know
But... regardless of my use case, I think that e.target.value should work for all keyboard events
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:48
I just created a patch that also provides which
would you be ok with
out.keydown('div', 123, {
  value: 'foobar'
});
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:53
Would it not be possible to access the existing value from within my tested component otherwise? It seems like out.keydown('input', 123) should be sufficient. What prevents e.target from being defined in this case?
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:54
do you call setValue on this element before?
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 21:55
I've tried it both ways
once with setValue before and once without
Stephan Hoyer
@StephanHoyer
Dec 17 2015 21:55
I shouldn't work with the current implementation
Im just thinking
afk
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:01
re
The feature you request is to add state to input fields
mq currently only supports this for compontents
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:10
Ah, I see. Do you plan to add that feature? I think it would be very useful. In my case, I have a series of actions that are triggered when a user presses 'enter' on an input and it would be nice to be able to test that out. If it is any help, here is a repo that illustrates the issue with as little code as I think is needed. You can just open index.html and check the console. https://github.com/sebastiansandqvist/mithril-query-test
If you would prefer--to keep the discussion organized I can post this in an issue.
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:13
I normal don't rely on state of input fields but rather have a model that is data-binded to the input field
in this way you don't have to rely on values in input fields
and therefor don't need this feature
It would be possible to do this with mithril query, but not in the next weeks or so
but feel free to create a PR
would highly appreciate this
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:15
What do you use to bind your model to the input?
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:16
m('input', {
  oninput: assign(model, 'name')
})
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:17
What is assign doing in this case?
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:17
assign is a small helper function
function assign(obj, objAttr) {
  return function (event) {
    obj[objAttr] = event.currentTarget.value;
  };
}
something like that
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:20
Makes sense. To be honest, that is almost exactly the current setup of my code. Like m.withAttr, since this relies on e.target.value (although I'll have to look into .currentTarget), I imagine the same issue would arise with this approach as well.
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:27
To be clear: I don't rely on value of input fields except at the event of the oninput handler
and this is perfectly testable with the current version of mq
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:29
The only trouble with oninput is the lack of e.which
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:30
maybe I don't fully understand what you try to accomplish
You want to track the value of an input field with the keydown-event listener?
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:32
Sorry for not being clear. I want to capture the enter key press event and either prevent the default event or not based on the input's current value. And because key events (keyDown, keyPress, etc) happen before the input event, it could be buggy to just rely on the model which is updated on input (after key press) in the way your code is with assign.
That is all in my code, not in the tests.
The test just needs to trigger a keyPress of 'enter' and not throw an error.
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:34
this now can be done, just released 0.8.0
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:35
that was quick! I'll give it a shot
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:36
you can now do something like this:
  $out.keydown('div', 'enter', {
    altKey: true,
    shiftKey: true,
    ctrlKey: false,
    value: 'foobar',
    silent: true // if silent is set to true, no automatic redraw will happen
  });
maybe you can live with this. If not feel free to open an issue or even a PR
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:44
It works perfectly, even with just $out.keydown('div', 'enter'). Thank you for your support
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:46
no problem
Sebastian Sandqvist
@sebastiansandqvist
Dec 17 2015 22:46
And thanks of course for writing mithril-query. It has been a life saver more than a few times.
Stephan Hoyer
@StephanHoyer
Dec 17 2015 22:47
it's a good feeling when other people use ones creations