ten1seven / what-input Goto Github PK

Hi there,

I'm using Safari on an iPhone 7 running iOS 10.2. When touching the list items on the demo page the touches get registered correctly, however when holding down the list items any longer than a brief touch and then releasing them they get registered as mouse clicks. Any idea what might cause this?

Thanks!

Hi,
if you use the keyboard and then scroll with the mouse-wheel or move the mouse without leaving the window, currently the mouse-input is not identified, which is inconsistent.
So i think it might be useful to extend the mouse-identification by the wheel and mousemove events.
What do you think? Should i extend your widget?

Can't get it to work. Using Foundation 6 and Laravel.

When I open my Site, there is the error "Uncaught TypeError: Cannot set property 'whatInput' of undefined" what happens on line 9 of what-input.js so it should be the "root" variable, which is not available.

Am I doing something wrong or is the error elsewhere?

Thx! :)

[data-whatintent] is changed to mouse if the pointer is in a window when the page scrolls. I believe this is because mousemove is fired.

Add option to add specificKeys to detect keyboard press. This is useful for say, only listening to a user using their tab key. I'll be opening a PR soon. Let me know if there are any issues with this.

Thanks :)

could / should a check be added in with the “cut the mustard” tests for indexOf and EventListener?
Alternatively classList could be avoided all together. Happy to help out if i can.

FYI, Chrome displays the following message in the console in “verbose” mode:

preload.js:642 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.

Is there any downside to converting to “passive” event listeners?

More info:
https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

Thanks for everyone’s hard work on this! I use it on all my projects.

Hello!

The following css has different effects in different browsers:

[data-whatintent='mouse'] *:focus {
  outline: none;
}

• Safari 11.0.3: works on every element :)
• Firefox 59.0.2: does not work on
• Chrome 65: does not work on and

Have I missed any step to make it work in all of them?
Thanks!

Hurry while the name is available!

How-to:
https://docs.npmjs.com/getting-started/publishing-npm-packages

Package.json config info:
https://docs.npmjs.com/files/package.json

don't forget to add

npm install what-input

and

var whatInput = require('what-input')

To the README.

I'm sometimes getting an error on from this line while testing in IE11. Apparently, activeElement can be null, so the line throws an error. I don't think it materially affects the script, but maybe an existence check there would be an improvement? If I get around to it, I can open a PR, but figure I should flag you on it.

Hello,

When I am using NVDA, what-input incorrectly changes the what-input to mouse in a specific circumstance.

Steps to reproduce :
Notes : Use NVDA and firefox.

1. https://codepen.io/anon/pen/VzVjVW?editors=1111
2. Navigate with tab to the button.
3. Press Enter
4. You will see the box dissapear

You will see what-input go from keyboard to mouse. It should stay in keyboard.

Without NVDA, it stays to keyboard.

What about when right-clicking to paste into an ?

README:
What Input is now v2.0.0

what-input.min.js:
@version_ v2.0.1

When testing with Chrome Emulator mode set to iPhone(or other touch device), what-input fails to bind the touchstart event since 'ontouchstart' in document.documentElement is false. Instead we should be checking for 'ontouchstart' in window which is true in Chrome when Device Emulation is active via Modernizr.

http://stackoverflow.com/questions/28544445/how-to-detect-device-mode-emulation
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

For example, I have a component that accepts CMD + Click.

I would like the data-whatinput to stay to mouse since the user isn't actually going to use the keyboard to navigate the app in any way.

Having the ability to define a list of ignored keys would be handy.

Hey,
I'm curious if anyone has gotten this to work on IE? I've tested on IE 9 and IE 10 to no avail. Its not a polyfill error as there is no error being thrown.

The script is initializing and the body is getting a mouse data attribute, but keyboard events are not causing this attribute to change.

If someone else can verify its not just me I'd be happy to fix it and submit a pr.

Thanks for a cool lib!

Is there a reason why a touch device is identified on the first touch event (e.g. using your finger to scroll a page) but a mouse isn't identified the first time the user moves the cursor over the page?

I would like to see a simple “cut the mustard” style check to prevent errors in old browsers. There is a polyfill for IE 8 but I think the utility should degrade gracefully even without the polyfill.

A simple check like this would be enough to prevent errors:

if(!'addEventListener' in window && !!Array.prototype.indexOf) return;

Hi guys,

first of all: Thanks for your great work!

We want to use the tool like in the old version, which means: As long there was no explicit input, the intent should also be used to fill data-whatinput.

Maybe it's the best to add an option for that?

I think of something like

import WhatInput from 'what-input';

WhatInput.init({ useIntentAsLongThereWasNoExplicitInput: true }); // Of course with a much better naming, was just for illustration purposes

Looking forward to your feedback!

As the title suggests, I've been scratching my head effortlessly to make what-input work with React containers and/or virtual DOM, but seems not to work.

What I've noticed:

1. what-input updates the what-input
2. Works with non-react containers as intended.
3. Does not work with react components/containers

I've created a test case here:

https://codesandbox.io/s/4wlrq70km0

Test 1

Steps to reproduce:

Open https://4wlrq70km0.codesandbox.io/ in Safari on your iOS device. Tested with version 11.4.1.

• double tap the "Click me" button
• VoiceOver should read button as "Click me, expanded"
• double tap the "Click me" button again

Expected results:

VoiceOver should read button as "Click me, collapsed"

Actual results:

VoiceOver does not announce the aria-expanded change

Test 2

• comment out Line no. 3 import "what-input"; and click on Save button so what-input is not loaded
• repeat steps above, you will find you get the expected result this time.

Currently we use "what-input" in version "2.1.1". Because it is the last working version for our development process with requirejs.

Version 3 and up loaded uncorrectly. Unfortunately there is no error message ...

Could you try to import dist files via requirejs …

Why does mouse move trigger a change although it does not change focus?

Hello,

how can I force some input type in tests? I need to test my DropdownMenu which is behaving differently on touch (opens on click) and on mouse (opens on hover). I can run any JS from the test. Is there any way to trigger what-input detection?

Thank you.

What Input currently doesn't update the input method when <button> elements are being interacted with. Since buttons are not only used to interact with a form, would you consider removing it from the list of 'blacklisted' elements?

In iOS, when accessibilty feature voiceOver is active, you have a accessibility Focus.
With right /left swipes you can switch between elements, similar to keyboard navigation.

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIAccessibilityFocus_Protocol/index.html
I don't know if it is technically possible to cath up for the mode.
Even I dont't know how it is called in Android or windows phone.

But i try to help, if you ask.

I have the following use case: tooltips that open on click with touch, on focus with keyboard and on hover with mouse. In order to do that, I have to bind a listener on the corresponding event. Now, when the input (or intent) changes, I need to unbind the previous listener and bind the correct one.

As of now, I have a MutationObserver listening to changes on the html element, but I think it could be a lot simpler if this library could emit an event when the input (and/or intent) changes.

1. Open the demo at http://s.codepen.io/FezVrasta/debug/VepyPV
2. press TAB and the text will become red (correct!)
3. move the mouse outside of the window, the text is still red (correct!)
4. move the mouse inside the window, the text is not red anymore (not correct!)

I would expect the text to stay red till I actually use the mouse to click somewhere.

Shouldn't changing focus from one element to another using TAB change the input type to keyboard?

Steps to reproduce at demo page:

1. use mouse to click input Email address
2. use keyboard TAB key to change focus to input Password
3. input type stays as mouse 💣

If you keep using keyboard TAB key to change focus, it will change input type to mouse when button Submit is focused, which seems inconsistent

http://codepen.io/stephendesjardins/pen/MyqQLd

The bug is when I tab into a button with a long link, Chrome renders the long link after a few seconds and causes data-what-input to become a mouse. I tried disconnecting my mouse and the data still changes to mouse.

Windows Chrome 50.0.2657.0 (64-bit)

I just added What-Input to our codebase for styling focus, and it worked beautifully–by using require, it extended feature support to 2 separate browser extensions quite easily. However, our Mocha tests are now blowing up:

Mocha exploded!
>> ReferenceError: document is not defined
>>     at /Users/marcysutton/Sites/Deque/axe-devtools-react/node_modules/what-input/dist/what-input.js:71:15
>>     at Object.<anonymous> (/Users/marcysutton/Sites/Deque/axe-devtools-react/node_modules/what-input/dist/what-input.js:333:3)
>>     at _webpack_require_ (/Users/marcysutton/Sites/Deque/axe-devtools-react/node_modules/what-input/dist/what-input.js:36:30)
>>     at module.exports.document (/Users/marcysutton/Sites/Deque/axe-devtools-react/node_modules/what-input/dist/what-input.js:56:18)
>>     at /Users/marcysutton/Sites/Deque/axe-devtools-react/node_modules/what-input/dist/what-input.js:59:10
>>     at webpackUniversalModuleDefinition (/Users/marcysutton/Sites/Deque/axe-devtools-react/node_modules/what-input/dist/what-input.js:9:20)
>>     at Object.<anonymous> (/Users/marcysutton/Sites/Deque/axe-devtools-react/node_modules/what-input/dist/what-input.js:16:3)

I've run into this problem a bunch with browser API scripts assembled with Node.js. In axe-core, we shim an IIFE with the window object, which keeps Node from complaining. Perhaps something similar could be done here?

Part 1: https://github.com/dequelabs/axe-core/blob/master/lib/intro.stub#L12
Part 2: https://github.com/dequelabs/axe-core/blob/master/lib/outro.stub#L2

Has anyone else run into this issue?

I'm using Sentry to monitor a site, and it's been giving me this error a few times in IE11:

TypeError: Unable to get property 'length' of undefined or null reference
  at y(./node_modules/what-input/dist/what-input.js:253:0)

The sourcemap points to the issue being inside this method, e.g. accessing length on classList.

	  var setElement = function setElement(event) {
	    currentElement = event.target.nodeName.toLowerCase();
	    docElem.setAttribute('data-whatelement', currentElement);

	    if (event.target.classList.length) {
	      docElem.setAttribute('data-whatclasses', event.target.classList.toString().replace(' ', ','));
	    }
	  };

A quick google reveals that classList is not supported on SVG elements in IE 11, which could cause this issue. Would it make sense to add a simple check to ensure that classList exists before trying to use it?

Hi there,

If my mouse cursor is inside the window document, and I use the keyboard, it switches the data-whatinput to "keyboard", but then within about 1 second it switches right back to "mouse". If my cursor is outside of the screen, the input stays on "keyboard".

This happens both on my site and your demo site, but not on another site I worked on in the past. Maybe something has changed since I did that site? (I only have the minified version from that site.) Or, wondering if maybe my mouse sensitivity is set higher than normal? (It's a new wireless Logitech M510 Advanced.) Could something else be triggering the listener? Or perhaps there is new code that makes the mouse movement more delicate?

I checked the doc page for settings for something like this but couldn't find anything.

Thanks.

Does anyone have any idea where this error might be originating: Can't find variable: mobiGetClick?

It appeared on iPads in iOS 11.3 immediately after I added the what-input library. I can't reproduce the error, but it's appearing in our production logs. And mobiGetClick is virtually unfindable on the internet. Any ideas?

P.S. Thanks for a great library!

I'm using what-input to switch between photo captions appearing when hovering over a photo, and appearing underneath the photo, depending on whether the user is a mouse user or not. Switching input type causes a page reflow as the captions take up more vertical space.

If I go to click on a photo with my Ctrl key pressed (to open the photo link in a new tab) then the input type is changed and the page reflows, making content jump around just as a user is trying to click on it.

Would it be possible to ignore certain key codes? I would want tab, space, enter etc to trigger keyboard input mode, but perhaps not keys that are often used in conjunction with mouse input.

We have code like this project already and found we had to patch it because FastClick triggers clicks when the user taps. I'd like to move to depending on something like this (that's used & tested by many), rather than having our own custom code, but it would have to handle this case.

I know this isn't the primary use case, but I was surprised to see that what-input doesn't see chrome's "emulate touch" clicks as touches. This is probably because emulate touch is a hack and what-input is doing something clever, but if you have any ideas and it's a quick fix, that would be cool.

Is there a need for the console.log(value) statement on line 129 of what-input.js ?

It's not a real issue, just like to see my console clean unless there's an issue present.

An unfortunate side-effect of adding a wheel event listener is that it triggers undesirable scrolling behavior for input[type="number"] elements in Chrome and Safari on macOS:

<label for="exampleNumberInput">Example number input</label>
<input type="number" class="form-control" id="exampleNumberInput" name="exampleNumberInput">

This only occurs when a wheel event listener is added and it occurs regardless of where in the document it's added. For example, these input[type="number"] events don't have this behavior:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Currently, the prevailing solution is to blur the input on the mousewheel event, but I would like to keep focus on the element:

https://stackoverflow.com/questions/9712295/disable-scrolling-on-input-type-number

I don't know the full extent of how this behavior affects Windows and Linux.

I'm seeing this happen across all browsers (Chrome, Safari 11, IE):
https://sentry.io/share/issue/2a3086e854984946a535c53daf14aed7/

currentElement = event.target.nodeName.toLowerCase();
docElem.setAttribute('data-whatelement', currentElement);

Seems to be caused by the user clicking on a <svg>, and the browser returning nodeName as undefined. Like, if the user clicks on a "Share" button on our site.

Is setting currentElement critical or a nice feature? regardless, it should check if nodeName exists before calling toLowerCase(). I'll make pull request.

You said to open a ticket if I needed UMD, so here I am :).

We're looking at integrating what-input for helping with some accessibility issues we're having. However, we're developing everything internally in ES6, loading via modules, and compiling with webpack. Given that, I really dislike the idea of importing something that adds a global, as we've already had problems with these sorts of "implicit" dependencies on the global scope that we weren't aware of and caused issues, and would make it difficult for us long-term to to maintain.

I don't know how open you are to changes in your process, but I do know webpack can handle compiling to umd so that may help eliminate the overhead of maintaining the UMD wrapper yourself, deferring it to webpack instead.

And since we're using ES6, the static analysis of ES6 modules has been very helpful for us, so might also suggest updating to use ES6 modules as well so ES6 consumers like us can use the module rather than the compiled build.

I'm not the type to drop in on an OS project and suggest a bunch of work and walk away, so I will also say that if these are changes you might be open to, I'd be willing to work on and open a PR to implement them as well. That said, you're still going to end up being the one to maintain this long-term, so it's up to you.

Let me know what you think!

In cases where one wants to prevent default key events (e.g. stopping, preventDefault), it would be necessary to call doUpdate('intent') manually from the outside as whatInput listeners will not be reached.

Not sure on the best approach but it would be nice to be able to still have 'mouse' set when typing in an input if the :focus was triggered by a click (or tap etc.).

• Persist previous input method
• Option to set keyboard input to only trigger on tab

I just tested http://ten1seven.github.io/what-input/ with my laptop. It's an Ubuntu machine.

Unfortunately, it identified it as a mouse.

It did work fine on my Android device. Not sure where the problem lies.

I just found this comment about what input on a11yproject.com:

Consider this third solution as a last resort. Some browser/screen reader combinations fire mouse events, which could cause outlines to disappear while using this method.

Can someone confirm or deny if what input is working correctly with screen readers?

I'm not using bower or npm to install what-input.js, I'm simply using the src file.
My import tag:

<script src="js/vendor/what-input.js"></script>

It exists at that location because it was working with a previous version at the same location.

I'm getting an error:

Uncaught ReferenceError: module is not defined
    at what-input.js:1

Am I doing something wrong in my usage/installation, or is this an actual bug? Using latest master branch as of May 23, 2017 (4pm).

Using Chrome Version 58.0.3029.110 (64-bit) on Mac OS X 10.12.5