MaterialUI는 이를 어떻게 수행합니까?-PHP 중국어 네트워크 Q&A

자동완성 구성요소를 살펴보면: https://mui.com/material-ui/react-autocomplete/

드롭다운에서 제안을 클릭한 후에도 입력 상자에 초점이 유지됩니다. 어떻게 그렇게 합니까? 내 자신의 vue 앱(머티리얼 UI를 사용하지 않음)의 모든 변형에서 입력이 포커스를 잃지 않도록 클릭 이벤트를 얻을 수 없습니다.

이 문제를 오랫동안 Google에서 검색해 보았지만 명확한 해결책을 찾지 못했습니다. 예를 들어 사람들은 mousedown/touchstart를 제안했지만 이로 인해 스크롤이 중단되었습니다(드롭다운을 드래그하여). MaterialUI에는 분명히 이 문제가 없으며 mousedown을 사용하지 않는 것 같습니다.

Chrome 개발자 도구를 사용하여 이벤트 분석을 시도했지만 단 한 번의 클릭 이벤트만 볼 수 있지만, 제거된 코드로는 무슨 일이 일어나고 있는지 파악하기 어렵습니다.

Vuetify도 이 작업을 수행합니다: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/comComponents/VAutocomplete/VAutocomplete.ts

이 문제가 있는 사람이 있으면 이 https://codepen.io/Pineapple/pen/MWBVqGW

도 도움이 됩니다.

수정제가 하고 있는 일은 다음과 같습니다.

 @autocomplete-select="onSelect" @autocomplete-close="onClose" :open="열기"> <템플릿 #기본="{ 결과 }">  {{ 결과.주소 }}

그런 다음 app-input-autocomplete에서:

<템플릿> <앱 입력 @focus="onFocus" @blur="onBlur" v-bind="$attrs"> <템플릿 #underInput>    
 
    <스크립트> 'vue'에서 { ref, toRef } 가져오기; '@/comComponents/AppInput.vue'에서 AppInput을 가져옵니다. '@vueuse/core'에서 { onClickOutside }를 가져옵니다. 기본값 내보내기 { 구성요소: { 앱 입력, }, 상속 속성: 거짓, 소품: { 열려 있는: { 유형: 부울, 기본값: 거짓, }, 결과: { 유형: 배열, 기본값: () => ([]), }, }, 방출: ['autocomplete-close', 'autocomplete-select'], setup(props, { 방출 }) { const 드롭다운 = ref(null); const open = toRef(props, 'open'); const 집중 = ref(false); onClickOutside(dropdown, () => { if (!focused.value && open.value) { Emit('자동완성-닫기'); } }); 반품 { 쓰러지 다, 집중하고, }; }, 방법: { 온포커스() { this.focused = 사실; }, onBlur() { this.focused = 거짓; }, onClick(결과) { this.$emit('autocomplete-select', result); }, }, }; 
      
     
     
      
       
       1
      
      
       
       0
      
      
       
       0
      
     
     
      
       
       
        P粉916760429
        
       
      
      
       
       
        
         
        
       
      
     
     
      
       
        모든 응답
        (1)
       
       
       
      
      
      
       
       
        
         
          P粉9940928732023-09-05 12:04:13
          1층
         
         
          아이디어와 이 링크를 제공해 주신 @Claies에게 감사드리며 다음을 수행하여 이 문제를 해결했습니다.
          https://codepen.io/Pineapple/pen/MWBVqGW
          
           event.preventDefaultonmousedown
           @click 결과는 평소와 동일하게 동작합니다(입력 끄기)
           @click/@focus 입력 세트open = true
           @blur 설정 공개 = false
          
         
         
          
          좋다+0
          
           답글 추가
           关闭回复
          
         
         
          
           
            
             
             P粉916760429