下拉菜单仅适用于Chrome，但不适用于Safari和Firefox

Question

我有一个按钮实际上会触发无序列表下拉按钮。

在chrome上可以正常工作。

这是在主体下拉列表（无序列表）内的按钮

 <button
    key={title}
    className="filters-item filters-item-btn"
    onFocus={() => toggleDropdown(title)}
    onBlur={() => toggleDropdown(title)}
  >
    <span className={openedDropdown && titleDropdown === title ? 'filters-item-active' : ''}>
      {title}
    </span>
    <span
      className={'arrow-up-icon'}
    />
    {openedDropdown ? (
      <Dropdown />
    ) : (
      ''
    )}
  </button>

需要帮助找出问题所在。

CSS部分代码：

.filters-wrapper {
  width: 100%;

  .filters {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid var(--color-grey-light);

    &-options {
      outline: none;
      flex: 2;
    }

    &-item {
      color: var(--color-grey);
      cursor: pointer;

      &-btn {
        border: none;
        font-size: 14px;
        cursor: pointer;
        background-color: white;
      }

      &-active {
        color: var(--color-black);
        height: 21px;
        font-size: 14px;
        line-height: 21px;
        cursor: pointer;
      }
    }

    .arrow-up-icon {
      font-size: 16px;
      float: right;
      padding-top: 3.5px;
      margin-left: 3px;
      cursor: pointer;
    }

    .arrow-down-icon {
      font-size: 16px;
      float: right;
      padding-top: 1px;
      margin-left: 3px;
      cursor: pointer;
    }
}

任何建议，资源，评论，我都可以在其中学习并找出解决方法？