fix(FocusTrap): fix first render modal autoFocus (#7147)

* fix(FocusTrap): fix first render modal autoFocus. add module with array functions

* fix(FocusTrap): run linters

packages/vkui/src/components/FocusTrap/FocusTrap.tsx

@@ -1,4 +1,5 @@
 import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';
+import { arraysEquals } from '../../helpers/array';
 import { useExternRef } from '../../hooks/useExternRef';
 import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
 import {
@@ -53,7 +54,9 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
     const element = focusableNodesRef.current[nodeIndex];
 
     if (element) {
-      element.focus();
+      element.focus({
+        preventScroll: true,
+      });
     }
   };
 
@@ -77,8 +80,14 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   };
 
   const onMutateParentHandler = (parentNode: HTMLElement) => {
+    const oldFocusableNodes = [...focusableNodesRef.current];
+
     recalculateFocusableNodesRef(parentNode);
 
+    if (arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
+      return;
+    }
+
     if (document) {
       const activeElement = document.activeElement as HTMLElement;
       const currentElementIndex = Math.max(

packages/vkui/src/helpers/array.test.ts

@@ -0,0 +1,12 @@
+import { arraysEquals } from './array';
+
+describe.each([
+  { arrA: [1, 2, 3], arrB: [1, 2, 3], expected: true },
+  { arrA: [1, 2, 3, 4], arrB: [1, 2, 3], expected: false },
+  { arrA: [1, 2, 3], arrB: [1, 3, 2], expected: false },
+  { arrA: [{}, {}], arrB: [{}, {}], expected: false },
+])('arraysEquals', ({ arrA, arrB, expected }) => {
+  test(`returns ${expected}`, () => {
+    expect(arraysEquals(arrA, arrB)).toBe(expected);
+  });
+});

packages/vkui/src/helpers/array.ts

@@ -0,0 +1,9 @@
+/**
+ * Сравнивает два массива
+ */
+export function arraysEquals<T>(arrA: T[], arrB: T[]) {
+  if (arrA.length !== arrB.length) {
+    return false;
+  }
+  return arrA.every((item, index) => item === arrB[index]);
+}