Adds cursor: pointer; to all inputs

[adambedford]

I'm seeing an inline style cursor: pointer; added to input elements (along with touch-action: manipulation; -ms-touch-action: manipulation;), which isn't desirable as it breaks convention for fields that accept user input.

I'm pretty sure the source of this inline style is ember-toggle and this seems like a bug.

[knownasilya]

What is the style that's introducing this in your app?

We don't use any generic selectors, everything is behind a specific toggle class. The css is here https://github.com/knownasilya/ember-toggle/tree/master/vendor/ember-toggle

[lolmaus]

@knownasilya, he's talking about inline styles, the ones set from JS.

[knownasilya]

I don't think we have any in v5.

[lolmaus]

@adambedford, can you repro?

[adambedford]

here's an example pulled from the Chrome inspector. It happens with input elements as well. I'm not 100% positive this is coming from ember-toggle but I can't think of where else it'd be coming from at the moment

<textarea 
  style="touch-action: manipulation; -ms-touch-action: manipulation; cursor: pointer;" 
  placeholder="Add a private note..." 
  id="ember1260-field"
  class="form-control ember-view">
</textarea>

[lolmaus]

This addon has nothing to do with textareas. Try running your browser with all extensions disabled (there should be a CLI flag for that).

[knownasilya]

Maybe ember-gestures does something? This addon does use that addon..

[danconnell]

This is happening because ember-hammertime, a dependency of this addon, is applying those styles

[lolmaus]

@danconnell Thank you!

Closing this in favor of upstream issue: https://github.com/html-next/ember-hammertime/issues/31

[danconnell]

FYI @adambedford ember-hammertime doesn't have working configs, as documented in that bug, so you're best off downgrading to [email protected] until ember-hammertime is fixed.

[knownasilya]

@rwwagner90 just including you since you are active in the ember-hammertime repo.

[adambedford]

thanks @danconnell Unfortunately I need the material style so I can't downgrade. I'll have to wait this one out I suppose.

[RobbieTheWagner]

@knownasilya yeah, the issue in ember-hammertime was being worked on by @Techn1x but he said he was not having much success. What is the desired fix here? If we make it more configurable, can ember-toggle disable some of these? Just want to know exactly what we want before I look into a fix.

[knownasilya]

Basically, it makes all inputs have a pointer on hover. Not sure we should be doing anything from our side. I think the desired effect is that only items that need touch support via hammertime have the pointer. Maybe the API there should be opt-in for elements. I'd be fine with having to explicitly opt ember-toggle into touch.

[RobbieTheWagner]

@knownasilya do we need ember-gestures for this addon?

[knownasilya]

It might be overkill, we just need swipe/drag support (so toggles feel native), maybe there is a simpler way to do that.

[lolmaus]

Using ember-gestures was the simplest thing implementation-wise. Native drag events are pretty quirky.

[knownasilya]

Yeah, which is sad :(

[lolmaus]

We're using this as a workaround until https://github.com/html-next/ember-hammertime/issues/31 is resolved and included into ember-gestures:

input[type="text"], textarea {
  cursor: text !important;
}

[RobbieTheWagner]

I just released ember-hammertime 1.3.0, with configuration options that should allow us to disable these things. Is anyone interested in helping get this into ember-gestures and over the finish line, so we can fix this here?

[adambedford]

@rwwagner90 How do we get your fix into ember-toggle to resolve this issue?

[RobbieTheWagner]

@adambedford I don't think anything needs to be done here. I think ember-hammertime is installed directly in your app via a blueprint, so you should just have to configure it.

[adambedford]

Thank you @rwwagner90 Do you have guidance on what the ember-hammertime config should be to get rid of the inline styles for all other elements?

[RobbieTheWagner]

@adambedford the configuration is documented in the README https://github.com/html-next/ember-hammertime#configuration

If anything is unclear, please let me know.

[knownasilya]

So something like touchActionSelectors: ['.x-toggle-component']? We can probably document a good default for x-toggle.

[RobbieTheWagner]

@knownasilya that might work. All of the config options need to be set though. The default is to apply the styles to everything with an action all buttons, etc. and if we want to turn all that off, it needs to be something like:

EmberHammertime: {
    touchActionOnAction: false,
    touchActionAttributes: [''],
    touchActionSelectors: ['.x-toggle-component'],
    touchActionProperties: 'touch-action: manipulation; -ms-touch-action: manipulation; cursor: pointer;'
  }

We don't want to mess up ember-hammertime for the consuming app by assuming any config, but we should document how to disable it.

[adambedford]

I haven't been able to get this working. I tried the config suggested by @rwwagner90 and even installed ember-hammertime in my app directly (it doesn't seem to be installed by ember-toggle via blueprint, but is instead a dependency)

[RobbieTheWagner]

@adambedford I thought we didn't have a direct dep on it here, but it appears I was wrong. We need to update the deps here to use ember-hammertime 1.3.0.

[adambedford]

@knownasilya @rwwagner90 Has there been any progress on this by chance?

[RobbieTheWagner]

@adambedford I just opened a PR to update ember-hammertime here.