MaterialUI はどのようにしてこれを行うのでしょうか?

Question

オートコンプリート コンポーネントを見ると: https://mui.com/material-ui/react-autocomplete/

ドロップダウン内の提案をクリックした後も、入力ボックスはフォーカスを保持します...どうやってそれを行うのでしょうか?私自身の Vue アプリ (マテリアル UI を使用していない) のすべてのバリアントでは、入力がフォーカスを失うのを防ぐためのクリック イベントを取得できません。

この問題について長い間 Google で調べてみましたが、明確な解決策が見つかりませんでした。たとえば、人々はマウスダウン/タッチスタートを提案しましたが、これでは (ドロップダウンをドラッグすることによる) スクロールが中断されます。 MaterialUI にはこの問題はないようで、マウスダウンを使用していないようです。

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="開く">
    <template #default="{ result }">
      <div class="入力オートコンプリートアドレス">
        {{ 結果.アドレス }}
      </div>
    </テンプレート>
  </app-input-autocomplete>

次に、app-input-autocomplete:

<テンプレート>
  <アプリ入力
    @focus=「オンフォーカス」
    @blur=「オンブラー」
    v-bind="$attrs">
    <テンプレート #underInput>
      <div ref="dropdown" v-show="open" class="input-autocomplete-dropdown">
        <div class="入力オートコンプリート結果">
          <div v-for="結果の結果" :key="result.id" @click="onClick(result)" class="input-autocomplete-result">
            <slot :result="結果" />
          </div>
        </div>
      </div>
    </テンプレート>
  </app-input>
</テンプレート>

<スクリプト>
import { ref, toRef } から 'vue';
AppInput を '@/components/AppInput.vue' からインポートします。
'@vueuse/core' から { onClickOutside } をインポートします。

デフォルトのエクスポート {
  コンポーネント: {
    アプリ入力、
  }、
  継承属性: false、
  小道具: {
    開ける： {
      タイプ: ブール値、
      デフォルト: false、
    }、
    結果： {
      タイプ: 配列、
      デフォルト: () => ([])、
    }、
  }、
  発行: ['autocomplete-close', 'autocomplete-select'],
  setup(props, { 出力 }) {
    const ドロップダウン = ref(null);

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

    const focus = ref(false);

    onClickOutside(ドロップダウン, () => {
      if (!focused.value && open.value) {
        Emit('autocomplete-close');
      }
    });

    戻る {
      落ちる、
      集中して、
    };
  }、
  メソッド: {
    onFocus() {
      this.focused = true;
    }、
    onBlur() {
      this.focused = false;
    }、
    onClick(結果) {
      this.$emit('autocomplete-select', result);
    }、
  }、
};
</スクリプト>

Answer 1

@Claies のアイデアとリンクに感謝し、次の手順でこの問題を解決しました。

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

mousedown
1. の event.preventDefault
@クリック結果は通常どおり動作します (入力が閉じられます)
@click/@focus 入力セット
3. open = true
@ブラーセットオープン = false