Revert "Firefox: properly read the selected option from CustomSelect …

…input" This reverts commit 0e04f81.
VKCOM · Aug 19, 2024 · 5d502a9 · 5d502a9
1 parent 1b4d6c5
commit 5d502a9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 23 deletions.
diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.module.css b/packages/vkui/src/components/CustomSelect/CustomSelect.module.css
@@ -19,12 +19,6 @@
   display: none;
 }
 
-.CustomSelect__options-list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
 .CustomSelect__empty {
   padding-block: 12px;
   padding-inline: 0;

diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
@@ -167,7 +167,7 @@ type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
 export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(
   props: SelectProps<OptionInterfaceT>,
 ): React.ReactNode {
-  let [opened, setOpened] = React.useState(false);
+  const [opened, setOpened] = React.useState(false);
   const {
     before,
     name,
@@ -218,7 +218,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const handleRootRef = useExternRef(containerRef, getRootRef);
   const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);
   const selectElRef = useExternRef(getRef);
-  const optionsWrapperRef = React.useRef<HTMLUListElement>(null);
+  const optionsWrapperRef = React.useRef<HTMLDivElement>(null);
 
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);
   const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
@@ -625,7 +625,6 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       return (
         <React.Fragment key={`${typeof option.value}-${option.value}`}>
           {renderOptionProp({
-            Component: 'li',
             option,
             hovered,
             children: option.label,
@@ -659,14 +658,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const resolvedContent = React.useMemo(() => {
     const defaultDropdownContent =
       options.length > 0 ? (
-        <ul
-          className={styles['CustomSelect__options-list']}
-          ref={optionsWrapperRef}
-          id={popupAriaId}
-          role="listbox"
-        >
-          {options.map(renderOption)}
-        </ul>
+        <div ref={optionsWrapperRef}>{options.map(renderOption)}</div>
       ) : (
         <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>
       );
@@ -676,7 +668,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     } else {
       return defaultDropdownContent;
     }
-  }, [emptyText, options, renderDropdown, renderOption, popupAriaId]);
+  }, [emptyText, options, renderDropdown, renderOption]);
 
   const selectInputRef = useExternRef(getSelectInputRef);
   const focusOnInputTimerRef = React.useRef<ReturnType<typeof setTimeout>>();
@@ -795,6 +787,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const selectInputAriaProps: React.HTMLAttributes<HTMLElement> = {
     'role': 'combobox',
     'aria-controls': popupAriaId,
+    'aria-owns': popupAriaId,
     'aria-expanded': opened,
     ['aria-activedescendant']:
       ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
@@ -871,6 +864,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
           autoHideScrollbar={autoHideScrollbar}
           autoHideScrollbarDelay={autoHideScrollbarDelay}
           noMaxHeight={noMaxHeight}
+          role="listbox"
+          id={popupAriaId}
+          aria-labelledby={ariaLabelledBy}
           tabIndex={-1}
         >
           {resolvedContent}

diff --git a/packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx b/packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Icon16Done } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -13,9 +13,7 @@ const sizeYClassNames = {
   ['regular']: styles['CustomSelectOption--sizeY-regular'],
 };
 
-export interface CustomSelectOptionProps
-  extends HTMLAttributesWithRootRef<HTMLDivElement>,
-    HasComponent {
+export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Добавляет описание под основным блоком.
    */
@@ -88,9 +86,9 @@ export const CustomSelectOption = ({
 
   return (
     <Paragraph
-      Component="div"
       {...restProps}
       onClick={disabled ? undefined : onClick}
+      Component="div"
       role="option"
       aria-disabled={disabled}
       aria-selected={selected}