From 4a04023062d0dae303fdc235ded87f72024f8487 Mon Sep 17 00:00:00 2001
From: Dmitriy Osipov <75555523+teunlao@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:54:36 +0200
Subject: [PATCH] Cb 3910 focus fix (#1962)

* CB-3910: fix focusable elements selector

* CB-3910: update focus when ref changed

---------

Co-authored-by: EvgeniaBzzz <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 webapp/packages/core-blocks/src/useFocus.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/webapp/packages/core-blocks/src/useFocus.ts b/webapp/packages/core-blocks/src/useFocus.ts
index 0ee9724644..418e7fdbd4 100644
--- a/webapp/packages/core-blocks/src/useFocus.ts
+++ b/webapp/packages/core-blocks/src/useFocus.ts
@@ -38,8 +38,6 @@ export function useFocus<T extends HTMLElement>({ autofocus, focusFirstChild, on
       setRef(ref: T | null) {
         if (this.reference !== ref) {
           this.reference = ref;
-
-          this.updateFocus();
         }
       },
       updateFocus() {
@@ -64,12 +62,12 @@ export function useFocus<T extends HTMLElement>({ autofocus, focusFirstChild, on
       focusFirstChild() {
         if (this.reference !== null && optionsRef.focusFirstChild) {
           const firstFocusable = this.reference.querySelectorAll<T>(`
-            button:not([disabled=disabled]), 
+            button:not([disabled]):not([disabled=disabled]), 
             [href], 
-            input:not([disabled=disabled]):not([readonly=readonly]), 
-            select:not([disabled=disabled]):not([readonly=readonly]), 
-            textarea:not([disabled=disabled]):not([readonly=readonly]), 
-            [tabndex]:not([tabndex="-1"])`);
+            input:not([disabled]):not([readonly]):not([disabled=disabled]):not([readonly=readonly]), 
+            select:not([disabled]):not([readonly]):not([disabled=disabled]):not([readonly=readonly]), 
+            textarea:not([disabled]):not([readonly]):not([disabled=disabled]):not([readonly=readonly]), 
+            [tabindex]:not([tabindex="-1"])`);
 
           let tabIndex = -1;
           let lastElement: T | undefined;
@@ -134,6 +132,8 @@ export function useFocus<T extends HTMLElement>({ autofocus, focusFirstChild, on
     reference.addEventListener('focusin', focusHandler);
     reference.addEventListener('focusout', blurHandler);
 
+    state.updateFocus();
+
     return () => {
       reference.removeEventListener('focusin', focusHandler);
       reference.removeEventListener('focusout', blurHandler);