adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.16k stars 1.06k forks source link

Compatibility issue with Grammarly and DateField #6169

Open brynshanahan opened 3 months ago

brynshanahan commented 3 months ago

Provide a general summary of the issue here

Grammarly overlays its little dot over the individual date fields making them very hard to click. Is it possible to disable this from Spectrum's end?

image image

๐Ÿค” Expected Behavior?

Grammarly shouldn't overlay in a DateField

๐Ÿ˜ฏ Current Behavior

Grammarly currently overlays it's dot obscuring the click area of the spinbuttons

๐Ÿ’ Possible Solution

https://github.com/facebookarchive/draft-js/issues/616 https://stackoverflow.com/a/46777787

๐Ÿ”ฆ Context

I'm just testing against the production React Spectrum docs page

๐Ÿ–ฅ๏ธ Steps to Reproduce

  1. Visit Spectrum with Grammarly enabled
  2. Tab through the input field

https://react-spectrum.adobe.com/react-spectrum/DateField.html

Version

Spectrum Docs

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

snowystinger commented 3 months ago

The fact that the data-* attribute keeps changing means we don't really have a great way to ensure this.

As a Grammarly user myself, I usually just turn it off for inputs that I don't want it on. I haven't noticed it getting in my way too much.

I'm not sure the best way to handle this. There have to be some other plugins as well, for instance, password managers frequently have a similar problem. We can't possibly account for them all. If we allowed users to specify a list of data attributes and their values <DateField inputPluginAttributes={[{name: 'gramm', value: 'false'}]}, would that be flexible enough, but also not something which would be misused?