Skip to content

fix(enterKeyHint): use a fixed enterKeyHint value on Samsung devices #916

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FabienMotte merged 10 commits into from
Mar 30, 2022
Merged

fix(enterKeyHint): use a fixed enterKeyHint value on Samsung devices #916

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7789ef7
fix(enterKeyHint): don't update enterKeyHint value on Samsung devices
FabienMotte Mar 8, 2022
0588d25
chore: fix if no user agent exist
FabienMotte Mar 8, 2022
e772e3a
apply suggestions from code review
FabienMotte Mar 9, 2022
4d79747
apply suggestions from code review
FabienMotte Mar 23, 2022
3b8b052
Merge branch 'next' into fix/enterKeyHint-samsung
FabienMotte Mar 23, 2022
473eeaf
fix bundle size
FabienMotte Mar 25, 2022
188d7b9
apply suggestions from code review
FabienMotte Mar 25, 2022
99e90e4
apply suggestion from code review
FabienMotte Mar 29, 2022
a30b995
Merge branch 'next' into fix/enterKeyHint-samsung
FabienMotte Mar 29, 2022
ec86a12
apply suggestions from code review
FabienMotte Mar 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions packages/autocomplete-core/src/getPropGetters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@ import {
GetRootProps,
InternalAutocompleteOptions,
} from './types';
import { getActiveItem, isOrContainsNode } from './utils';
import {
getActiveItem,
isAndroid,
isChrome,
isOrContainsNode,
isSamsung,
} from './utils';

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

const enterKeyHint = activeItem?.itemUrl ? 'go' : 'search';
const userAgent = props.environment.navigator?.userAgent;
const enterKeyHintFallback =
isSamsung(userAgent) && isAndroid(userAgent) && isChrome(userAgent);
Comment thread
FabienMotte marked this conversation as resolved.
Outdated

return {
'aria-autocomplete': 'both',
'aria-activedescendant':
Expand All @@ -175,7 +186,7 @@ export function getPropGetters<
autoComplete: 'off',
autoCorrect: 'off',
autoCapitalize: 'off',
enterKeyHint: activeItem?.itemUrl ? 'go' : 'search',
enterKeyHint: enterKeyHintFallback ? 'enter' : enterKeyHint,
spellCheck: 'false',
autoFocus: props.autoFocus,
placeholder: props.placeholder,
Expand Down
2 changes: 1 addition & 1 deletion packages/autocomplete-core/src/types/AutocompletePropGetters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export type GetInputProps<TEvent, TMouseEvent, TKeyboardEvent> = (props: {
autoComplete: 'on' | 'off';
autoCorrect: 'on' | 'off';
autoCapitalize: 'on' | 'off';
enterKeyHint: 'go' | 'search';
enterKeyHint: 'enter' | 'go' | 'search';
spellCheck: 'false';
maxLength: number;
type: 'search';
Expand Down
119 changes: 119 additions & 0 deletions packages/autocomplete-core/src/utils/__tests__/isAndroid.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import { isAndroid } from '../isAndroid';
Comment thread
FabienMotte marked this conversation as resolved.
Outdated
Comment thread
FabienMotte marked this conversation as resolved.
Outdated

describe('isAndroid', () => {
describe('Android', () => {
describe('Mobile/tablet with Chrome', () => {
test('returns true with a Samsung S9 (Mobile - Chrome) user agent', () => {
const ua =
'Mozilla/5.0 (Linux; Android 8.0.0; SM-G960F Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36';

expect(isAndroid(ua)).toEqual(true);
});

test('returns true with a Samsung Galaxy Tab S3 (Tablet - Chrome) user agent', () => {
const ua =
'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';

expect(isAndroid(ua)).toEqual(true);
});
});

describe('Mobile/tablet with Firefox', () => {
test('returns true with an Android 8 (Mobile - Firefox) user agent', () => {
const ua =
'Mozilla/5.0 (Android 8.0.0; Mobile; rv:98.0) Gecko/98.0 Firefox/98.0';

expect(isAndroid(ua)).toEqual(true);
});

test('returns true with a Android 9 (Tablet - Firefox) user agent', () => {
const ua =
'Mozilla/5.0 (Android 9; Tablet; rv:97.0) Gecko/97.0 Firefox/97.0';

expect(isAndroid(ua)).toEqual(true);
});
});
});

describe('iOS/iPadOS', () => {
describe('Mobile/tablet with Chrome', () => {
test('returns false with an iPhone XS (Mobile - Chrome) user agent', () => {
const ua =
'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';

expect(isAndroid(ua)).toEqual(false);
});

test('returns false with an iPad Air (Tablet - Chrome) user agent', () => {
const ua =
'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';

expect(isAndroid(ua)).toEqual(false);
});
});

describe('Mobile/tablet with Safari', () => {
test('returns false with an iPhone (Mobile - Safari) user agent', () => {
const ua =
'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';

expect(isAndroid(ua)).toEqual(false);
});

test('returns false with an iPad (Tablet - Safari) user agent', () => {
const ua =
'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';

expect(isAndroid(ua)).toEqual(false);
});
});

describe('Mobile/tablet with Firefox', () => {
test('returns false with an iPhone (Mobile - Firefox) user agent', () => {
const ua =
'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';

expect(isAndroid(ua)).toEqual(false);
});

test('returns false with an iPad (Tablet - Firefox) user agent', () => {
const ua =
'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';

expect(isAndroid(ua)).toEqual(false);
});
});
});

describe('Windows', () => {
test('returns false with a Windows 10 (Desktop - Chrome) user agent', () => {
const ua =
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4280.88 Safari/537.36';

expect(isAndroid(ua)).toEqual(false);
});

test('returns false with a Windows 10 (Desktop - Firefox) user agent', () => {
const ua =
'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0 Config/93.2.6681.82';

expect(isAndroid(ua)).toEqual(false);
});
});

describe('macOS', () => {
test('returns false with a macOS (Desktop - Chrome) user agent', () => {
const ua =
'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';

expect(isAndroid(ua)).toEqual(false);
});

test('returns false with a macOS (Desktop - Firefox) user agent', () => {
const ua =
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:99.0) Gecko/20100101 Firefox/99.0';

expect(isAndroid(ua)).toEqual(false);
});
});
});
119 changes: 119 additions & 0 deletions packages/autocomplete-core/src/utils/__tests__/isChrome.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import { isChrome } from '../isChrome';

describe('isChrome', () => {
describe('Android', () => {
describe('Mobile/tablet with Chrome', () => {
Comment thread
FabienMotte marked this conversation as resolved.
Outdated
test('returns true with a Samsung S9 (Mobile - Chrome) user agent', () => {
Comment thread
FabienMotte marked this conversation as resolved.
Outdated
const ua =
Comment thread
FabienMotte marked this conversation as resolved.
Outdated
'Mozilla/5.0 (Linux; Android 8.0.0; SM-G960F Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36';

expect(isChrome(ua)).toEqual(true);
});

test('returns true with a Samsung Galaxy Tab S3 (Tablet - Chrome) user agent', () => {
Comment thread
FabienMotte marked this conversation as resolved.
Outdated
const ua =
'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';

expect(isChrome(ua)).toEqual(true);
});
});

describe('Mobile/tablet with Firefox', () => {
test('returns false with an Android 8 (Mobile - Firefox) user agent', () => {
const ua =
'Mozilla/5.0 (Android 8.0.0; Mobile; rv:98.0) Gecko/98.0 Firefox/98.0';

expect(isChrome(ua)).toEqual(false);
});

test('returns false with a Android 9 (Tablet - Firefox) user agent', () => {
const ua =
'Mozilla/5.0 (Android 9; Tablet; rv:97.0) Gecko/97.0 Firefox/97.0';

expect(isChrome(ua)).toEqual(false);
});
});
});

describe('iOS/iPadOS', () => {
describe('Mobile/tablet with Chrome', () => {
test('returns true with an iPhone XS (Mobile - Chrome) user agent', () => {
const ua =
'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';

expect(isChrome(ua)).toEqual(true);
});

test('returns true with an iPad Air (Tablet - Chrome) user agent', () => {
const ua =
'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';

expect(isChrome(ua)).toEqual(true);
});
});

describe('Mobile/tablet with Safari', () => {
test('returns false with an iPhone (Mobile - Safari) user agent', () => {
const ua =
'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';

expect(isChrome(ua)).toEqual(false);
});

test('returns false with an iPad (Tablet - Safari) user agent', () => {
const ua =
'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';

expect(isChrome(ua)).toEqual(false);
});
});

describe('Mobile/tablet with Firefox', () => {
test('returns false with an iPhone (Mobile - Firefox) user agent', () => {
const ua =
'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';

expect(isChrome(ua)).toEqual(false);
});

test('returns false with an iPad (Tablet - Firefox) user agent', () => {
const ua =
'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';

expect(isChrome(ua)).toEqual(false);
});
});
});

describe('Windows', () => {
Comment thread
FabienMotte marked this conversation as resolved.
Outdated
test('returns true with a Windows 10 (Desktop - Chrome) user agent', () => {
Comment thread
FabienMotte marked this conversation as resolved.
Outdated
const ua =
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4280.88 Safari/537.36';

expect(isChrome(ua)).toEqual(true);
});

test('returns false with a Windows 10 (Desktop - Firefox) user agent', () => {
const ua =
'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0 Config/93.2.6681.82';

expect(isChrome(ua)).toEqual(false);
});
});

describe('macOS', () => {
test('returns true with a macOS (Desktop - Chrome) user agent', () => {
const ua =
'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';

expect(isChrome(ua)).toEqual(true);
});

test('returns false with a macOS (Desktop - Firefox) user agent', () => {
const ua =
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:99.0) Gecko/20100101 Firefox/99.0';

expect(isChrome(ua)).toEqual(false);
});
});
});
Loading