Chosen: iPad: li.search-choice를 닫거나 제거할 수 없음(`click.chosen` 이벤트가 실행되지 않음)

(적어도 iPad로 가장하는 Chrome에서는) 다중 선택에서 항목을 선택 취소할 수 없음을 확인할 수 있습니다. X를 눌러도 아무 작업도 수행되지 않습니다.

나는 같은 문제를 겪었다.

선택 필드(닫는 필드뿐만 아니라 실제로 다른 요소에 초점)에서 초점을 맞추면 X 버튼이 여전히 작동하지 않는다는 것을 알았습니다. 그러나 이 필드에 다시 초점을 맞추고 드롭다운을 표시하므로 이제 옵션을 성공적으로 삭제할 수 있습니다.

드롭다운을 닫으면 다시 X가 작동하지 않습니다.

크롬 에뮬레이터와 물리적 장치 모두에서 이것을 재현할 수 있습니다.

명확히 하기 위해서입니다. 요소에서 나가면 chosen-container-active 클래스를 삭제하려면 .chosen-container 를 만들어야 합니다. 때 chosen-container-active 에서 제거 chosen-container 새로운 초점을 다시 적용,이 순간에 잘 작동합니다.

자, 여기서 문제가 정확히 무엇인지 잘 모르겠지만 저에게 도움이 되었습니다.

먼저 초기화할 때 다음 옵션을 사용하고 있습니다.

el.chosen({
    display_selected_options: false,
    hide_results_on_select: false,
});

선택한 몇 가지 이유로 필드에 집중하지 않을 때 컨트롤과의 상호 작용을 차단합니다.

외부 필드를 클릭하면 results_hide 가 호출되고 이 메서드는 필드 액세스를 완전히 차단합니다(적어도 모바일/태블릿에서). 그래서 이 행동을 방지할 방법을 찾고 있었습니다.

results_showing 플래그를 false로 설정하면 이 버그가 발생하는 것 같습니다.

Chosen.prototype.results_hide = function() {
  if (this.results_showing) {
    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  // removed because of mobile issue with removeing options
  // return this.results_showing = false;
};

소스에서 제거하면(불편하지만 지금은 다른 선택이 없음) 트릭을 수행해야 합니다.

이것이 실제로 무엇을 하는지는 모르겠지만 현재로서는 어떤 부작용도 느끼지 못했습니다.

방금 모든 모바일 장치 및 태블릿에 대해 선택을 비활성화했습니다. 내장 터치 선택 인터페이스가 선택한 입력 상자보다 사용자 친화적인지 모르겠습니다. 검색 옵션이 누락되었지만 터치 장치에서는 어쨌든 이상하게 느껴졌습니다.

590행:

    AbstractChosen.browser_is_supported = function() {
      if ("Microsoft Internet Explorer" === window.navigator.appName) {
        return document.documentMode >= 8;
      }
      if (/iP(od|hone)/i.test(window.navigator.userAgent) || /IEMobile/i.test(window.navigator.userAgent) || /Windows Phone/i.test(window.navigator.userAgent) || /BlackBerry/i.test(window.navigator.userAgent) || /BB10/i.test(window.navigator.userAgent) || /Android.*Mobile/i.test(window.navigator.userAgent)) {
        return false;
      }
      if ((/iPhone|iPod|iPad|Android|android|playbook|silk|BlackBerry/).test(navigator.userAgent))
      {
        return false;
      }
      if (/Android/i.test(window.navigator.userAgent)) {
        if (/Mobile/i.test(window.navigator.userAgent)) {
          return false;
        }
       }
       return true;
     };

건배
한네스