diff --git a/docs/components/input.md b/docs/components/input.md
index 499c9ca7..7b0f4251 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -5,7 +5,7 @@
Inputs collect data from the user.
```html preview
-
+
```
```jsx react
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index d1de314d..7babfcd9 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -18,6 +18,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Fixed a bug in `` that prevented the `arrow-padding` attribute from working as expected
- Improved accessibility of `` so keyboard nav works better and screen readers announce it properly
- Improved accessibility of `` so screen readers no longer skip over it
+- Removed a user agent sniffing notice that appeared in Chrome [#855](https://github.com/shoelace-style/shoelace/issues/855)
- Removed the default hover effect in `` to make selections more obvious
- Updated Floating UI to 1.0.1
- Updated esbuild to 0.15.1
diff --git a/package-lock.json b/package-lock.json
index a8b54feb..35a8b01a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,7 +63,8 @@
"sinon": "^14.0.0",
"strip-css-comments": "^5.0.0",
"tslib": "^2.4.0",
- "typescript": "4.7.4"
+ "typescript": "4.7.4",
+ "user-agent-data-types": "^0.3.0"
},
"engines": {
"node": ">=14.17.0"
@@ -14460,6 +14461,12 @@
"node": ">= 4"
}
},
+ "node_modules/user-agent-data-types": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/user-agent-data-types/-/user-agent-data-types-0.3.0.tgz",
+ "integrity": "sha512-AI3vPwmafXd4r/mSbubOu6S1ngO4vdvJFAJdP0MUc9Y4SwXm/Pqpno0R/O4Zt26vZYzWorV+4BgVcntxhJlMPw==",
+ "dev": true
+ },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -25851,6 +25858,12 @@
"integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=",
"dev": true
},
+ "user-agent-data-types": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/user-agent-data-types/-/user-agent-data-types-0.3.0.tgz",
+ "integrity": "sha512-AI3vPwmafXd4r/mSbubOu6S1ngO4vdvJFAJdP0MUc9Y4SwXm/Pqpno0R/O4Zt26vZYzWorV+4BgVcntxhJlMPw==",
+ "dev": true
+ },
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index f1d283bf..97ab0ae0 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,8 @@
"sinon": "^14.0.0",
"strip-css-comments": "^5.0.0",
"tslib": "^2.4.0",
- "typescript": "4.7.4"
+ "typescript": "4.7.4",
+ "user-agent-data-types": "^0.3.0"
},
"lint-staged": {
"*.{ts,js}": [
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 1ebf5c6c..ef145910 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -13,6 +13,17 @@ import '../icon/icon';
import styles from './input.styles';
import type { CSSResultGroup } from 'lit';
+// It's currently impossible to hide Firefox's built-in clear icon when using , so we need this
+// check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but, if it fails, we only see a
+// redundant clear icon so nothing important is breaking. The benefits outweigh the costs for this one. See the
+// discussion at: https://github.com/shoelace-style/shoelace/pull/794
+//
+// Also note that we do the Chromium check first to prevent Chrome from logging a console notice as described here:
+// https://github.com/shoelace-style/shoelace/issues/855
+//
+const isChromium = navigator.userAgentData?.brands.some(b => b.brand.includes('Chromium'));
+const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
+
/**
* @since 2.0
* @status stable
@@ -369,12 +380,7 @@ export default class SlInput extends LitElement {
'input--empty': !this.value,
'input--invalid': this.invalid,
'input--no-spin-buttons': this.noSpinButtons,
-
- // It's currently impossible to hide Firefox's built-in clear icon when using , so
- // we need this check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but
- // if it fails, we only see a redundant clear icon so nothing important is breaking. The benefits outweigh
- // the costs for this one. See the discussion at: https://github.com/shoelace-style/shoelace/pull/794
- 'input--is-firefox': navigator.userAgent.includes('Firefox')
+ 'input--is-firefox': isFirefox
})}
>
diff --git a/tsconfig.json b/tsconfig.json
index 7cc81f87..f526b262 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,7 +26,10 @@
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"useUnknownInCatchVariables": true,
- "baseUrl": "."
+ "baseUrl": ".",
+ "types": [
+ "./node_modules/user-agent-data-types"
+ ]
},
"include": [
"src"