Skip to content

Commit b4aa087

Browse files
FabienMotteFabienMotte
authored
fix(enterKeyHint): use a fixed enterKeyHint value on Samsung devices (#916)
* fix(enterKeyHint): don't update enterKeyHint value on Samsung devices * chore: fix if no user agent exist * apply suggestions from code review * apply suggestions from code review * fix bundle size * apply suggestions from code review * apply suggestion from code review * apply suggestions from code review
1 parent 927b1bc commit b4aa087

File tree

7 files changed

+435
-3
lines changed

7 files changed

+435
-3
lines changed

‎bundlesize.config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"files": [
33
{
44
"path": "packages/autocomplete-core/dist/umd/index.production.js",
5-
"maxSize": "6 kB"
5+
"maxSize": "6.25 kB"
66
},
77
{
88
"path": "packages/autocomplete-js/dist/umd/index.production.js",

‎packages/autocomplete-core/src/getPropGetters.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
GetRootProps,
1515
InternalAutocompleteOptions,
1616
} from './types';
17-
import { getActiveItem, isOrContainsNode } from './utils';
17+
import { getActiveItem, isChrome, isOrContainsNode, isSamsung } from './utils';
1818

1919
interface GetPropGettersOptions<TItem extends BaseItem>
2020
extends AutocompleteScopeApi<TItem> {
@@ -162,6 +162,11 @@ export function getPropGetters<
162162
const { inputElement, maxLength = 512, ...rest } = providedProps || {};
163163
const activeItem = getActiveItem(store.getState());
164164

165+
const userAgent = props.environment.navigator?.userAgent;
166+
const shouldFallbackKeyHint = isSamsung(userAgent) && isChrome(userAgent);
167+
const enterKeyHint =
168+
activeItem?.itemUrl && !shouldFallbackKeyHint ? 'go' : 'search';
169+
165170
return {
166171
'aria-autocomplete': 'both',
167172
'aria-activedescendant':
@@ -175,7 +180,7 @@ export function getPropGetters<
175180
autoComplete: 'off',
176181
autoCorrect: 'off',
177182
autoCapitalize: 'off',
178-
enterKeyHint: activeItem?.itemUrl ? 'go' : 'search',
183+
enterKeyHint,
179184
spellCheck: 'false',
180185
autoFocus: props.autoFocus,
181186
placeholder: props.placeholder,

‎packages/autocomplete-core/src/utils/__tests__/isChrome.test.ts

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
import { isChrome } from '../isChrome';
2+
3+
describe('isChrome', () => {
4+
describe('Samsung', () => {
5+
describe('Chrome', () => {
6+
test('returns true with a Samsung Galaxy S20 (mobile) user agent', () => {
7+
expect(
8+
isChrome(
9+
'Mozilla/5.0 (Linux; Android 10; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36'
10+
)
11+
).toEqual(true);
12+
});
13+
14+
test('returns true with a Samsung Galaxy S4 (mobile) user agent', () => {
15+
expect(
16+
isChrome(
17+
'Mozilla/5.0 (Linux; Android 5.0.1; SAMSUNG-SGH-I337 Build/LRX22C) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Mobile Safari/537.36'
18+
)
19+
).toEqual(true);
20+
});
21+
22+
test('returns true with a Samsung Galaxy Tab S3 (tablet) user agent', () => {
23+
expect(
24+
isChrome(
25+
'Mozilla/5.0 (Linux; Android 7.0; SM-T827R4 Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.116 Safari/537.36'
26+
)
27+
).toEqual(true);
28+
});
29+
30+
test('returns true with a Samsung Chromebook (desktop) user agent', () => {
31+
expect(
32+
isChrome(
33+
'Mozilla/5.0 (Linux; Android 9; Samsung Chromebook Plus (V2) Build/R94-14150.64.0; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/96.0.4664.45 Safari/537.36'
34+
)
35+
).toEqual(true);
36+
});
37+
});
38+
39+
describe('Firefox', () => {
40+
test('returns false with a Samsung GT-I9250 (mobile) user agent', () => {
41+
expect(
42+
isChrome(
43+
'Mozilla/5.0 (Android 4.0.3; Mobile; Galaxy Nexus; rv:13.0) Gecko/13.0 Firefox/13.0'
44+
)
45+
).toEqual(false);
46+
});
47+
48+
test('returns false with a Samsung GT-I9000 (mobile) user agent', () => {
49+
expect(
50+
isChrome(
51+
'Mozilla/5.0 (Android 2.1.0; Mobile; GT-I9000; rv:95.0) Gecko/95.0 Firefox/95.0'
52+
)
53+
).toEqual(false);
54+
});
55+
});
56+
57+
describe('Samsung Browser', () => {
58+
test('returns false with a Samsung Galaxy S10 (mobile) user agent', () => {
59+
expect(
60+
isChrome(
61+
'Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G977N Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.2 Chrome/67.0.3396.87 Mobile Safari/537.36'
62+
)
63+
).toEqual(false);
64+
});
65+
66+
test('returns false with a Samsung Galaxy Tab A (tablet) user agent', () => {
67+
expect(
68+
isChrome(
69+
'Mozilla/5.0 (Linux; Android 5.0.2; SAMSUNG SM-T550 Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/3.3 Chrome/38.0.2125.102 Safari/537.36'
70+
)
71+
).toEqual(false);
72+
});
73+
});
74+
});
75+
76+
describe('HTC', () => {
77+
describe('Chrome', () => {
78+
test('returns true with an HTC One X (mobile) user agent', () => {
79+
expect(
80+
isChrome(
81+
'Mozilla/5.0 (Linux; Android 4.0.3; HTC One X Build/IML74K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19'
82+
)
83+
).toEqual(true);
84+
});
85+
86+
test('returns true with an HTC One (mobile) user agent', () => {
87+
expect(
88+
isChrome(
89+
'Mozilla/5.0 (Linux; Android 4.3; HTC One Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36'
90+
)
91+
).toEqual(true);
92+
});
93+
});
94+
95+
describe('Firefox', () => {
96+
test('returns false with an HTC 0P9C2 (mobile) user agent', () => {
97+
expect(
98+
isChrome(
99+
'Mozilla/5.0 (Linux; Android 6.0; HTC_0P9C2 Build/MRA58K; rv) Gecko/13.0 Firefox/13.0'
100+
)
101+
).toEqual(false);
102+
});
103+
});
104+
105+
describe('Android Browser', () => {
106+
test('returns false with an HTC Desire (mobile) user agent', () => {
107+
expect(
108+
isChrome(
109+
'Mozilla/5.0 (Linux; U; Android 2.2; en-de; HTC_Desire Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1'
110+
)
111+
).toEqual(false);
112+
});
113+
114+
test('returns false with an HTC One X (mobile) user agent', () => {
115+
expect(
116+
isChrome(
117+
'Mozilla/5.0 (Linux; U; Android 4.2.2; ru-by; HTC One X Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 YandexSearch/7.16'
118+
)
119+
).toEqual(false);
120+
});
121+
});
122+
});
123+
124+
describe('Apple', () => {
125+
describe('Chrome', () => {
126+
test('returns true with an iPhone XS (mobile) user agent', () => {
127+
expect(
128+
isChrome(
129+
'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1'
130+
)
131+
).toEqual(true);
132+
});
133+
134+
test('returns true with an iPad Air (tablet) user agent', () => {
135+
expect(
136+
isChrome(
137+
'Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1'
138+
)
139+
).toEqual(true);
140+
});
141+
142+
test('returns true with a macOS (desktop) user agent', () => {
143+
expect(
144+
isChrome(
145+
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4919.0 Safari/537.36'
146+
)
147+
).toEqual(true);
148+
});
149+
});
150+
151+
describe('Firefox', () => {
152+
test('returns false with an iPhone (mobile) user agent', () => {
153+
expect(
154+
isChrome(
155+
'Mozilla/5.0 (iPhone; CPU iPhone OS 12_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/97.0 Mobile/15E148 Safari/605.1.15'
156+
)
157+
).toEqual(false);
158+
});
159+
160+
test('returns false with an iPad (tablet) user agent', () => {
161+
expect(
162+
isChrome(
163+
'Mozilla/5.0 (iPad; CPU OS 12_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/97.0 Mobile/15E148 Safari/605.1.15'
164+
)
165+
).toEqual(false);
166+
});
167+
168+
test('returns false with a macOS (desktop) user agent', () => {
169+
expect(
170+
isChrome(
171+
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:99.0) Gecko/20100101 Firefox/99.0'
172+
)
173+
).toEqual(false);
174+
});
175+
});
176+
177+
describe('Safari', () => {
178+
test('returns false with an iPhone (mobile) user agent', () => {
179+
expect(
180+
isChrome(
181+
'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/605.1.15 i-filter/sbm-safety/2.00.04.0004'
182+
)
183+
).toEqual(false);
184+
});
185+
186+
test('returns false with an iPad (tablet) user agent', () => {
187+
expect(
188+
isChrome(
189+
'Mozilla/5.0 (iPad; CPU OS 15_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) EdgiOS/98.0.1108.62 Version/15.0 Mobile/15E148 Safari/604.1'
190+
)
191+
).toEqual(false);
192+
});
193+
194+
test('returns false with an macOS (desktop) user agent', () => {
195+
expect(
196+
isChrome(
197+
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9'
198+
)
199+
).toEqual(false);
200+
});
201+
});
202+
});
203+
});

0 commit comments

Comments
 (0)