Я создаю собственный выбор при реакции. Я знаю, что это не лучшая идея с точки зрения удобства использования и совместимости, но я должен это сделать из-за требований к продукту.
Мой первый подход использует кнопку для имитации ввода выбора, а для раскрывающегося списка я использую абсолютное позиционирование div со списком кнопок. Причина, по которой я выбираю кнопку для параметров в списке, заключается в том, что они имеют несколько интересных функций из коробки:
- по умолчанию они настраиваются с помощью вкладок
- их можно активировать с помощью клавиатуры (ввод / пробел)
- они отключены и состояния фокуса
- у них есть правильные события указателя
Примерно это выглядит примерно так:
<div class="relative-wrapper">
<button class="select">{selected_value}</button>
<div class="dropdown">
<button class="option" role="option" aria-selected={someFlag}>{value1}</button>
<button class="option" role="option" aria-selected={someFlag}>{value2}</button>
</div>
</div>
Но, исследуя другие реализации, я вижу несколько из них (например, Material-ui), использующие вместо них ul и li с множеством атрибутов и стилей, чтобы они выглядели и вели себя как кнопки. Это заставило меня предположить, выберу ли я правильный вариант или лучше использовать другие теги html, такие как упомянутые ul и li. Есть ли какие-либо проблемы с использованием кнопок или какие-либо преимущества при использовании списков?