Focus first selectable element in preferences pane
This commit is contained in:
parent
078b176ec6
commit
e8a3dc5db6
6 changed files with 106 additions and 48 deletions
|
@ -3,7 +3,14 @@
|
|||
|
||||
import type { AudioDevice } from '@signalapp/ringrtc';
|
||||
import type { ReactNode } from 'react';
|
||||
import React, { useEffect, useState, useCallback, useMemo } from 'react';
|
||||
import focusableSelectors from 'focusable-selectors';
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { noop } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
import uuid from 'uuid';
|
||||
|
@ -354,6 +361,27 @@ export function Preferences({
|
|||
[onSelectedMicrophoneChange, availableMicrophones]
|
||||
);
|
||||
|
||||
const selectors = useMemo(() => focusableSelectors.join(','), []);
|
||||
const settingsPaneRef = useRef<HTMLDivElement | null>(null);
|
||||
useEffect(() => {
|
||||
const settingsPane = settingsPaneRef.current;
|
||||
if (!settingsPane) {
|
||||
return;
|
||||
}
|
||||
|
||||
const elements = settingsPane.querySelectorAll<
|
||||
| HTMLAnchorElement
|
||||
| HTMLButtonElement
|
||||
| HTMLInputElement
|
||||
| HTMLSelectElement
|
||||
| HTMLTextAreaElement
|
||||
>(selectors);
|
||||
if (!elements.length) {
|
||||
return;
|
||||
}
|
||||
elements[0]?.focus();
|
||||
}, [page, selectors]);
|
||||
|
||||
const onAudioOutputSelectChange = useCallback(
|
||||
(value: string) => {
|
||||
if (value === 'undefined') {
|
||||
|
@ -1278,7 +1306,9 @@ export function Preferences({
|
|||
{i18n('icu:Preferences__button--privacy')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="Preferences__settings-pane">{settings}</div>
|
||||
<div className="Preferences__settings-pane" ref={settingsPaneRef}>
|
||||
{settings}
|
||||
</div>
|
||||
</div>
|
||||
</TitleBarContainer>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue