0

我正在使用反应模态向用户展示在搜索栏中搜索的内容以及他在模态搜索栏下显示的任何他选择的项目。下面是我的代码结构

<ModalComponent>
<SearchBar/>
<SelectedItemsThroughSearchBar/>
</ModalComponent>

<SearchBar/> <SelectedItemsThroughSearchBar/>当我将这些组件加载到 modal 时，我还使用了 tabbing 工作的其他一些地方。选项卡被困在 SearchBar 上。

我在模态中面临的问题是如果我没有在我的搜索输入字段组件中输入任何内容，然后按下选项卡，焦点就不会出现。当我在我的搜索输入字段中输入内容然后按下选项卡时，焦点正在移动到下一个元素。

--->Below modal is react modal 
<ConfirmationModal
  isOpen={true}
  confirmBtnName={"Save"}
  onConfirm={() => {}}
  title={`Choose any item`}
  cancelBtnName={"Cancel"}
>
---> Searchinput bar started
<SearchInput
id={`searchInputId-${0}`}
type="search"
name={`searchInputField-${0}`}
isClearable={true}
isError={isError}
errorText={itemsErrorMessage}
ariaProps={{
  label: "Search item",
}}
placeholder="Search items"
handleChange={(event) =>
  updateQueryText(event.target.value, 0)
}
handleBlur={(event) => handleSearchInputBlur(0)}
handleClear={(e) => {
  setClientParticipantsItems([]);
}}
/>
---> list of options showing when the search keyword matched 

<ul
  className="form-combobox_list expanded scrollable-list"
  role="listbox"
>
  {selectedItems.length > 0 &&
    selectedItems.map((clientItem, i) => {
      return (
        <li
          className="form-combobox_list-item"
          onClick={() => selectClient(clientItem, 0)}
          tabIndex="0"
        >
          <span className="form-combobox_list-item_value-secondary">
            {clientItem.firstName +
              " " +
              clientItem.lastName +
              " - " +
              clientItem.email}
          </span>
        </li>
      );
    })
}
</ul>
 ----> search input bar end 
 
--> selected item s showing 
<SelectedItemsThroughSearchBar
  dynamicValue={addingMoreChips}
  options={addingMoreChips}
  statusCallback={(e) => {
    handlerForAddingMorechips(e);
  }}
/>
</ConfirmationModal>;

如果遗漏任何内容，请指导我并建议我添加任何内容。

4

0 回答 0