MaterialUI 是如何做到這一點的？

Question

如果你看看他們的自動完成元件：https://mui.com/material-ui/react-autocomplete/

點擊下拉清單中的建議後，輸入框會保持焦點...他們是如何做到的？在我自己的 vue 應用程式（不使用材質 UI）中的每個變體中，我無法取得點擊事件來阻止輸入失去焦點。

我已經嘗試用谷歌搜尋這個問題很長一段時間了，但沒有看到明確的解決方案。例如，人們建議 mousedown/touchstart，但這會破壞滾動（透過拖曳下拉式選單）。 MaterialUI顯然沒有這個問題，似乎沒有使用mousedown。

我嘗試使用 Chrome 開發工具分析事件，但只能看到單一點擊事件，但使用精簡的程式碼很難判斷發生了什麼。

Vuetify 也這樣做：https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts

如果有人遇到這個問題，我也發現這很有幫助https://codepen.io/Pineapple/pen/MWBVqGW

編輯這就是我正在做的事情：

 <app-input-autocomplete
    @autocomplete-select="onSelect"
    @autocomplete-close="onClose"
    :open="open">
    <template #default="{ result }">
      <div class="input-autocomplete-address">
        {{ result.address }}
      </div>
    </template>
  </app-input-autocomplete>

然後在app-input-autocomplete中：

<template>
  <app-input
    @focus="onFocus"
    @blur="onBlur"
    v-bind="$attrs">
    <template #underInput>
      <div ref="dropdown" v-show="open" class="input-autocomplete-dropdown">
        <div class="input-autocomplete-results">
          <div v-for="result in results" :key="result.id" @click="onClick(result)" class="input-autocomplete-result">
            <slot :result="result" />
          </div>
        </div>
      </div>
    </範本>
  </應用程式輸入>
</範本>

<腳本>
從 'vue' 導入 { ref, toRef };
從'@/components/AppInput.vue'導入AppInput；
從 '@vueuse/core' 導入 { onClickOutside }；

導出預設值{
  成分： {
    應用程式輸入，
  },
  繼承屬性：假，
  道具： {
    打開： {
      類型：布林值，
      預設值：假，
    },
    結果： {
      類型：數組，
      預設值：() => ([]),
    },
  },
  發出：['自動完成-關閉'，'自動完成-選擇']，
  設定（道具，{發射}）{
    常數下拉選單 = ref(null);

    const open = toRef(props, '開啟');

    常數聚焦 = ref(false);

    onClickOutside(下拉式選單, () => {
      if (!focused.value && open.value) {
        發出（'自動完成關閉'）；
      }
    });

    返回 {
      落下，
      專注,
    };
  },
  方法： {
    onFocus() {
      this.focused = true;
    },
    onBlur() {
      this.focused = false;
    },
    onClick（結果）{
      this.$emit('自動完成選擇', 結果);
    },
  },
};
</腳本>

Answer 1

我透過執行以下操作解決了這個問題，感謝@Claies 提供的想法以及此連結：

https://codepen.io/Pineapple/pen/MWBVqGW

1. #event.preventDefault on mousedown
2. #@click 結果的行為與正常情況相同（關閉輸入）
3. @click/@focus 輸入集open = true
4. @blur 設定 open = false