mirror of https://github.com/vector-im/riot-web
Fix roving tab index crash `compareDocumentPosition` (#12594)
* Fix roving tab index crash `compareDocumentPosition` Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>t3chguy/dedup-icons-17oct
parent
3e7511cc5d
commit
930b4e2424
|
@ -18,7 +18,7 @@ import React, {
|
|||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useLayoutEffect,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useReducer,
|
||||
|
@ -144,7 +144,7 @@ export const reducer: Reducer<IState, Action> = (state: IState, action: Action)
|
|||
}
|
||||
if (document.activeElement === document.body) {
|
||||
// if the focus got reverted to the body then the user was likely focused on the unmounted element
|
||||
state.activeRef?.current?.focus();
|
||||
setTimeout(() => state.activeRef?.current?.focus(), 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -362,7 +362,7 @@ export const useRovingTabIndex = <T extends HTMLElement>(
|
|||
}
|
||||
|
||||
// setup (after refs)
|
||||
useLayoutEffect(() => {
|
||||
useEffect(() => {
|
||||
context.dispatch({
|
||||
type: Type.Register,
|
||||
payload: { ref },
|
||||
|
|
|
@ -33,10 +33,7 @@ const Button = (props: HTMLAttributes<HTMLButtonElement>) => {
|
|||
};
|
||||
|
||||
const checkTabIndexes = (buttons: NodeListOf<HTMLElement>, expectations: number[]) => {
|
||||
expect(buttons.length).toBe(expectations.length);
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
expect(buttons[i].tabIndex).toBe(expectations[i]);
|
||||
}
|
||||
expect([...buttons].map((b) => b.tabIndex)).toStrictEqual(expectations);
|
||||
};
|
||||
|
||||
// give the buttons keys for the fibre reconciler to not treat them all as the same
|
||||
|
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { createRef } from "react";
|
||||
import { render } from "@testing-library/react";
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import EmojiPicker from "../../../../src/components/views/emojipicker/EmojiPicker";
|
||||
|
@ -24,7 +24,7 @@ import { stubClient } from "../../../test-utils";
|
|||
describe("EmojiPicker", function () {
|
||||
stubClient();
|
||||
|
||||
it("should not mangle default order after filtering", () => {
|
||||
it("should not mangle default order after filtering", async () => {
|
||||
const ref = createRef<EmojiPicker>();
|
||||
const { container } = render(
|
||||
<EmojiPicker ref={ref} onChoose={(str: string) => false} onFinished={jest.fn()} />,
|
||||
|
@ -41,7 +41,7 @@ describe("EmojiPicker", function () {
|
|||
// Clear the filter and assert that the HTML matches what it was before filtering
|
||||
//@ts-ignore private access
|
||||
ref.current!.onChangeFilter("");
|
||||
expect(beforeHtml).toEqual(container.innerHTML);
|
||||
await waitFor(() => expect(beforeHtml).toEqual(container.innerHTML));
|
||||
});
|
||||
|
||||
it("sort emojis by shortcode and size", function () {
|
||||
|
|
Loading…
Reference in New Issue