fix: forwardRef for buttons, keys

TomatoVan · Apr 27, 2024 · f6db832 · f6db832
1 parent 60bf1b8
commit f6db832
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 179 deletions.
diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
@@ -1,124 +1,124 @@
 {
-  "": "",
-  "123": "123",
-  "About site": "",
-  "Admin panel": "",
-  "All": "",
-  "Article ratings coming soon!": "",
-  "Articles": "",
-  "Articles app": "",
-  "Articles not found": "",
-  "Ascending": "",
-  "Back to list": "",
-  "Cancel": "",
-  "Choose ": "",
-  "Choose country": "",
-  "Choose currency": "",
-  "Close": "",
-  "Comments": "",
-  "Comments is loading": "",
-  "Create new article": "",
-  "Creation date": "",
-  "Descending": "",
-  "Design options": "",
-  "Economics": "",
-  "Edit": "",
-  "Enter ": "",
-  "Enter comment text": "",
-  "Enter cooment text": "",
-  "Error while loading articles": "",
-  "Error with getting article data": "",
-  "Error with getting profile data": "",
-  "Exit": "",
-  "Here you can search and view articles on various topics": "",
-  "IT": "",
-  "Incorrect age": "",
-  "Incorrect country": "",
-  "Incorrect user data": "",
-  "Leave your feedback on the article, it will help improve the quality": "",
-  "Main page": "",
-  "Main_page": "",
-  "Name": "",
-  "New": "",
-  "No data": "",
-  "Old": "",
-  "PROFILE PAGE": "",
-  "Profile": "",
-  "Rate the article": "",
-  "Read more": {
-    "": {
-      "": {
-        "": ""
-      }
-    }
-  },
-  "Recommend": "",
-  "Save": "",
-  "Science": "",
-  "Search": "",
-  "Send": "",
-  "Server error": "",
-  "Sort by": "",
-  "Sorting by": "",
-  "Thanks for review!": "",
-  "Try to reload page": "",
-  "User settings": "",
-  "Views": "",
-  "Welcome to the articles page!": "",
-  "You don`t have access to this page!": "",
-  "Your name": "",
-  "Your review": "",
-  "article_not_found": "",
-  "articles": "",
-  "articles page": "",
-  "articles_details": "",
-  "articles_details page": "",
-  "articles_detals": "",
-  "ascending": "",
-  "auth_form": "",
-  "auth_password": "",
-  "auth_username": "",
-  "by": "",
-  "comments": "",
-  "creation date": "",
-  "decrement": "",
-  "descending": "",
-  "exit": "",
-  "increment": "",
-  "login": "",
-  "login_error": "",
-  "name": "",
-  "no articles found": "",
-  "no comments": "",
-  "no profile found": "",
-  "read more": "",
-  "throw error": "throw error",
-  "views": "",
-  "{{count}} views": "",
-  "{{count}} views_plural": "",
-  "{{count}} просмотров": "",
-  "{{count}} просмотров_plural": "",
-  "Айти": "",
-  "Ваш отзыв": "",
-  "Все статьи": "",
-  "Главная страница": "",
-  "Закрыть": "",
-  "Наука": "",
-  "Обновить страницу": "",
-  "Отправить": "",
-  "Оценка статей скоро появится!": "",
-  "Поиск": "",
-  "Попробуйте обновить страницу": "",
-  "Произошла непредвиденная ошибка": "",
-  "Произошла ошибка при загрузке профиля": "",
-  "Редактировать": "",
-  "Сортировать ПО": "",
-  "Статьи не найдены": "",
-  "Экономика": "",
-  "возрастанию": "",
-  "дате создания": "",
-  "названию": "",
-  "по": "",
-  "просмотрам": "",
-  "убыванию": ""
+    "": "",
+    "123": "123",
+    "About site": "",
+    "Admin panel": "",
+    "All": "",
+    "Article ratings coming soon!": "",
+    "Articles": "",
+    "Articles app": "",
+    "Articles not found": "",
+    "Ascending": "",
+    "Back to list": "",
+    "Cancel": "",
+    "Choose ": "",
+    "Choose country": "",
+    "Choose currency": "",
+    "Close": "",
+    "Comments": "",
+    "Comments is loading": "",
+    "Create new article": "",
+    "Creation date": "",
+    "Descending": "",
+    "Design options": "",
+    "Economics": "",
+    "Edit": "",
+    "Enter ": "",
+    "Enter comment text": "",
+    "Enter cooment text": "",
+    "Error while loading articles": "",
+    "Error with getting article data": "",
+    "Error with getting profile data": "",
+    "Exit": "",
+    "Here you can search and view articles on various topics": "",
+    "IT": "",
+    "Incorrect age": "",
+    "Incorrect country": "",
+    "Incorrect user data": "",
+    "Leave your feedback on the article, it will help improve the quality": "",
+    "Main page": "",
+    "Main_page": "",
+    "Name": "",
+    "New": "",
+    "No data": "",
+    "Old": "",
+    "PROFILE PAGE": "",
+    "Profile": "",
+    "Rate the article": "",
+    "Read more": {
+        "": {
+            "": {
+                "": ""
+            }
+        }
+    },
+    "Recommend": "",
+    "Save": "",
+    "Science": "",
+    "Search": "",
+    "Send": "",
+    "Server error": "",
+    "Sort by": "",
+    "Sorting by": "",
+    "Thanks for review!": "",
+    "Try to reload page": "",
+    "User settings": "",
+    "Views": "",
+    "Welcome to the articles page!": "",
+    "You don`t have access to this page!": "",
+    "Your name": "",
+    "Your review": "",
+    "article_not_found": "",
+    "articles": "",
+    "articles page": "",
+    "articles_details": "",
+    "articles_details page": "",
+    "articles_detals": "",
+    "ascending": "",
+    "auth_form": "",
+    "auth_password": "",
+    "auth_username": "",
+    "by": "",
+    "comments": "",
+    "creation date": "",
+    "decrement": "",
+    "descending": "",
+    "exit": "",
+    "increment": "",
+    "login": "",
+    "login_error": "",
+    "name": "",
+    "no articles found": "",
+    "no comments": "",
+    "no profile found": "",
+    "read more": "",
+    "throw error": "throw error",
+    "views": "",
+    "{{count}} views": "",
+    "{{count}} views_plural": "",
+    "{{count}} просмотров": "",
+    "{{count}} просмотров_plural": "",
+    "Айти": "",
+    "Ваш отзыв": "",
+    "Все статьи": "",
+    "Главная страница": "",
+    "Закрыть": "",
+    "Наука": "",
+    "Обновить страницу": "",
+    "Отправить": "",
+    "Оценка статей скоро появится!": "",
+    "Поиск": "",
+    "Попробуйте обновить страницу": "",
+    "Произошла непредвиденная ошибка": "",
+    "Произошла ошибка при загрузке профиля": "",
+    "Редактировать": "",
+    "Сортировать ПО": "",
+    "Статьи не найдены": "",
+    "Экономика": "",
+    "возрастанию": "",
+    "дате создания": "",
+    "названию": "",
+    "по": "",
+    "просмотрам": "",
+    "убыванию": ""
 }
diff --git a/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx b/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx
@@ -49,6 +49,7 @@ export const ArticleViewSelector = memo((props: ArticleViewSelectorProps) => {
                         className={classNames('', {
                             [cls.notSelected]: viewType.view !== view,
                         })}
+                        key={viewType.view}
                     />
                 ))}
             </HStack>

diff --git a/src/shared/ui/redesigned/Button/Button.tsx b/src/shared/ui/redesigned/Button/Button.tsx
@@ -1,4 +1,9 @@
-import React, { ButtonHTMLAttributes, memo, ReactNode } from 'react';
+import React, {
+    ButtonHTMLAttributes,
+    ForwardedRef,
+    forwardRef,
+    ReactNode,
+} from 'react';
 import { classNames, Mods } from '@/shared/lib/classNames/classNames';
 import cls from './Button.module.scss';
 
@@ -20,43 +25,46 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     color?: ButtonColor;
 }
 
-export const Button = memo((props: ButtonProps) => {
-    const {
-        className,
-        children,
-        variant = 'outline',
-        square,
-        isDisabled,
-        size = 'm',
-        fullWidth,
-        addonLeft,
-        addonRight,
-        color = 'normal',
-
-        ...otherProps
-    } = props;
-
-    const mods: Mods = {
-        [cls.square]: square,
-        [cls.isDisabled]: isDisabled,
-        [cls.fullWidth]: fullWidth,
-        [cls.withAddonLeft]: Boolean(addonLeft),
-        [cls.withAddonRight]: Boolean(addonRight),
-        [cls.withAddon]: Boolean(addonLeft) || Boolean(addonRight),
-    };
-
-    const additional = [className, cls[variant], cls[size], cls[color]];
-
-    return (
-        <button
-            type="button"
-            className={classNames(cls.Button, mods, additional)}
-            disabled={isDisabled}
-            {...otherProps}
-        >
-            <div className={cls.addonLeft}>{addonLeft}</div>
-            {children}
-            <div className={cls.addonRight}>{addonRight}</div>
-        </button>
-    );
-});
+export const Button = forwardRef(
+    (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
+        const {
+            className,
+            children,
+            variant = 'outline',
+            square,
+            isDisabled,
+            size = 'm',
+            fullWidth,
+            addonLeft,
+            addonRight,
+            color = 'normal',
+
+            ...otherProps
+        } = props;
+
+        const mods: Mods = {
+            [cls.square]: square,
+            [cls.isDisabled]: isDisabled,
+            [cls.fullWidth]: fullWidth,
+            [cls.withAddonLeft]: Boolean(addonLeft),
+            [cls.withAddonRight]: Boolean(addonRight),
+            [cls.withAddon]: Boolean(addonLeft) || Boolean(addonRight),
+        };
+
+        const additional = [className, cls[variant], cls[size], cls[color]];
+
+        return (
+            <button
+                type="button"
+                className={classNames(cls.Button, mods, additional)}
+                disabled={isDisabled}
+                {...otherProps}
+                ref={ref}
+            >
+                <div className={cls.addonLeft}>{addonLeft}</div>
+                {children}
+                <div className={cls.addonRight}>{addonRight}</div>
+            </button>
+        );
+    },
+);
diff --git a/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.module.scss b/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.module.scss
@@ -1,17 +1,10 @@
-.trigger {
-    background: none;
-    border: none;
-    outline: none;
-    padding: 0;
-    margin: 0;
-}
-
 .options {
     background: var(--dark-bg-redesigned);
     position: absolute;
     z-index: 10000;
     border-radius: 12px;
     box-shadow: 4px 4px 8px var(--dark-bg-redesigned);
+    cursor: pointer;
 }
 
 .item {

diff --git a/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.tsx b/src/shared/ui/redesigned/Popups/ui/ListBox/ListBox.tsx
@@ -59,15 +59,15 @@ export function ListBox<T extends string>(props: ListBoxProps<T>) {
                 value={value}
                 onChange={onChange}
             >
-                <HListBox.Button className={cls.trigger}>
-                    <Button
-                        variant="filled"
-                        isDisabled={readonly}
-                        addonRight={<Icon Svg={ArrowIcon} />}
-                    >
-                        {selectedItem?.content ?? defaultValue}
-                    </Button>
+                <HListBox.Button
+                    as={Button}
+                    variant="filled"
+                    isDisabled={readonly}
+                    addonRight={<Icon Svg={ArrowIcon} />}
+                >
+                    {selectedItem?.content ?? defaultValue}
                 </HListBox.Button>
+
                 <HListBox.Options
                     className={classNames(cls.options, {}, optionsClasses)}
                 >