<p>vaadin-combo-box를 paper-dialog 안에 배치하면 경우에 따라 대화 상자가 닫힙니다.</p>

에 만든 2017년 02월 21일 · 19코멘트 · 출처: vaadin/vaadin-combo-box

설명

vaadin-combo-box 요소가 paper-dialog 내부에 있을 때 사용자가 선택 상자를 열면(선택하지 않고 그냥 열린 상태로 둡니다) 대화 상자의 아무 곳이나 클릭하면 대화 상자가 닫힙니다.

예상되는 결과

대화 상자의 아무 곳이나 클릭하면(왼쪽 상단 모서리에 있음) 상자는 닫히지만 대화 상자는 열어 둡니다.

실제 결과

대화 상자의 아무 곳이나 클릭하면 전체 대화 상자가 닫힙니다.

라이브 데모

https://jsfiddle.net/ribe/02tntfn3/2/

재현 단계

대화 상자를 열고,
상자를 열고 선택하지 마십시오. 열린 상태로 두십시오.
3. 대화 상자의 왼쪽 상단 모서리를 클릭합니다.

출처

GoceRibeski

가장 유용한 댓글

참고로, 이것은 마우스를 사용하여 콤보 상자에서 항목을 선택하는 경우에도 발생합니다...

kito99 에 2017년 03월 02일

👍7

모든 19 댓글

이벤트 전파에 일종의 버그가 있습니다. 예를 들어 Esc를 눌러 vaadin-combo-box 를 닫으면 대화 상자도 닫힙니다. 이러한 경우 일반적으로 on-keydown="_stopPropagation" 와 같은 것을 사용하고 다음과 같은 처리기를 추가합니다.

_stopPropafation: function (e) {
  e.stopPropagation()
}

IronA11yKeysBehavior 에서 제공하는 stopKeyboardEventPropagation 속성도 있지만 해당 동작은 vaadin-combo-box 에 의해 구현되지 않고 해당 속성이 일부 다른 요소에 대해 작동하지 않는 것 같습니다. 이벤트를 너무 늦게 처리하는 것 같습니다.

web-padawan 에 2017년 02월 21일

주어진 Fiddle에서 stopPropagation 를 호출하는 이벤트를 배치할 위치를 찾을 수 없습니다. 어떤 아이디어라도?

GoceRibeski 에 2017년 02월 21일

안녕하세요!

여기서 문제는 <vaadin-combo-box> <paper-dialog> <body> 아래에 배치되어 콤보 상자의 오버레이에 대한 모든 클릭을 "외부 클릭"으로 간주한다는 것입니다. ", 기본적으로 대화 상자를 닫습니다.

해결 방법으로 콤보 상자가 열려 있을 때 외부 클릭을 비활성화할 수 있습니다.

...
<vaadin-combo-box id="third" label="Focus Third" tabindex="3" on-focus="_focusInput" items="[[items]]" on-blur="_onBlur" on-opened-changed="_onComboBoxOpened">
        </vaadin-combo-box>

<script>
...
_onComboBoxOpened: function(e) {
  if (e.detail.value) {
    this.$.add_row_details_dialog.noCancelOnOutsideClick = true;
  } else {
    this.async(function() {
      this.$.add_row_details_dialog.noCancelOnOutsideClick = false;
    }, 10);
  }
}
...
</script>

Saulis 에 2017년 03월 01일

@Saulis , 불행히도 당신의 접근 방식은 저에게 효과가 없었습니다. 그러나 종이 대화 상자에서 noCancelOnOutsideClick 속성을 true로 설정하면 문제가 해결됩니다(이 경우 대화 상자 외부를 클릭할 때 대화 상자를 닫을 필요가 없었습니다).

kito99 에 2017년 03월 02일

👍1

참고로, 이것은 마우스를 사용하여 콤보 상자에서 항목을 선택하는 경우에도 발생합니다...

kito99 에 2017년 03월 02일

👍7

paper-dialog 요소에 'no-cancel-on-outside-click'을 적용합니다. 이렇게 하면 vaadin-combo-box에서 마우스 클릭이나 키보드로 요소를 선택할 때 대화 상자가 닫히지 않습니다.

<paper-dialog no-cancel-on-outside-click> <vaadin-combo-box class="elements-box" items="[[arrayOfValues]]"></vaadin-combo-box> </paper-dialog>

artem-vladimirov 에 2017년 03월 17일

👍1

@kito99 / @artem-vladimirov의 no-cancel-on-outside-click을 사용한 해결 방법은 사용자가 외부 클릭으로 대화 상자를 닫을 수 있기를 원하기 때문에 일반적으로 또는 저에게 적합하지 않습니다. (그러나 그것이 요구 사항이 아닌 경우 작동하는지 확인할 수 있습니다).

또 다른 (유사한) 해결 방법은 iron-overlay-canceled 이벤트를 수신한 다음 event.stopPropagation() 및 event.preventDefault() 를 호출하는 것이지만 다른 해결 방법과 동일한 문제가 있습니다. 대화 상자를 닫을 수 없습니다. 배경 클릭에.

나는 두 이벤트를 서로 구별하려고 시도했지만 지금까지는 운이 없습니다.

항목을 선택하는 것만으로도 대화 상자가 닫히고 종이 대화 상자를 클릭하여 선택을 취소하는 것도 마찬가지라는 @kito99 의 관찰을 확인할 수 있습니다.

편집하다:

나는 다음과 같은 해결 방법을 생각해 냈습니다.

        listeners: {
          "iron-overlay-canceled": "onCanceled",
        },
        onCanceled(event) {
            const paperDialogHoverElement = document.querySelector("paper-dialog:hover");
            const vaadinHoverElement = document.querySelector("vaadin-combo-box-overlay:hover");
            if (paperDialogHoverElement || vaadinHoverElement) {
                event.stopPropagation();
                event.preventDefault();
            }
        }

즉, 커서가 종이 대화 상자 또는 오버레이 요소에 있는 경우에만 이벤트가 취소됩니다. 이 해결 방법을 사용하면 드롭다운 값을 선택하고 외부 클릭으로 대화 상자를 닫고 이스케이프 버튼으로 대화 상자를 닫을 수도 있습니다. Chrome 및 Firefox에서 테스트되었습니다.

panuhorsmalahti 에 2017년 04월 03일

새 버전을 기다리는 것 외에 여기서 할 일이 있습니까? 공식 vaadin 해결 방법?

timoteoponce 에 2017년 05월 10일

왜 이 문제를 오랫동안 완전히 놓쳤는지 잘 모르겠습니다. 이것은 정말 근본적인 사용성 문제이며 빨리 수정되어야 합니다. @Saulis 또는 개발 팀의 다른 누군가가 이번 주나 다음 주에 살펴보도록 영감을 줄 수 있는지 알아보겠습니다.

jouni 에 2017년 05월 10일

👍1

안녕하세요 여러분, iron-overlay-cancel 브랜치를 사용해보십시오 (불행히도 현재 마스터 위에 구축되었으므로 하이브리드 인 경우 종속성 충돌이있을 수 있습니다. deps를 2.0-preview 로 해결하고 Polymer를 어느 쪽이든 원하다)

또한 1.x 분기( iron-overlay-cancel-v1 ) 상단에서 변경 사항을 선택했지만 현재 Polymer 2 바우어 설정을 엉망으로 만들고 싶지 않기 때문에 스스로 작동하는지 확인할 수 없습니다. -)

업데이트: 이 수정 사항은 iron-overlay-behavior v1.10.3 이상에서만 작동합니다.

Saulis 에 2017년 05월 10일

@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce 누구든지 수정을 시도할 기회가 있습니까? 감사 해요!

Saulis 에 2017년 06월 12일

@Saulis 상기시켜 주셔서 감사합니다. 방금 iron-overlay-cancel-v1 분기를 잡고 경고를 봅니다.

[vaadin-combo-box::_createEventHandler]: listener method `_onBlur` not defined

따라서 paper-dialog 및 내부 vaadin-combo-box 를 모두 연 후 두 가지를 시도했습니다.

Esc 키를 누르면 콤보 상자 오버레이가 열려 있는 동안 대화 상자가 닫히고,
항목을 선택하면 대화 상자와 콤보 상자가 모두 닫힙니다.

지금 조사할 시간이 많지 않지만, 청취자가 누락된 것이 원인일 수 있습니다.

web-padawan 에 2017년 06월 12일

@web-padawan 감사합니다! 누락된 _onBlur 에 대해 걱정할 필요가 없습니다. 리스너는 의도적으로 제거되었지만 실수로 리스너 바인딩을 제자리에 두었습니다. 귀하가 보고한 문제를 다시 테스트해야 합니다. v1 분기를 직접 테스트하지 않았습니다.

Saulis 에 2017년 06월 12일

@web-padawan iron-overlay-cancel 에서 Polymer 2.x 및 iron-overlay-cancel-v1 Polymer 1.9.1 iron-overlay-behavior 에서 수정 사항이 작동하는지 확인할 수 있습니다. v1.10.3 이상 설치( 2.0.0 실행 중)

Saulis 에 2017년 06월 12일

@Saulis 그것은 나를 위해 작동하지 않습니다. 사실 2.0a4에는 없는 이상한 버그도 있습니다. 내 템플릿의 모든 텍스트가 사라집니다.

iron-overlay-behavior#2.0.0 로 폴리머 2를 실행 중입니다.

다음은 2.0.0-alpha4 입니다. http://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
다음은 iron-overlay-cancel 지점입니다. http://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm

arkihillel 에 2017년 06월 12일

@arkihillel master 위에 iron-overlay-cancel 를 다시 기반으로 했습니다. 다시 시도할 수 있습니까? 그리고 모든 bower dep를 다시 설치해야 합니다.

Saulis 에 2017년 06월 12일

저에게 효과가 있는 것 같습니다.
사용: vaadin-combo-box#iron-overlay-cancel, polymer#2.0.1, iron-overlay-behavior#2.0.0

Btw, 큰 문제는 아니지만 _removeOutsideTabListener , 즉 Tab 대 Tap 으로 오타를 냈을 수 있습니다 ;)

jonagh 에 2017년 06월 12일

@Saulis 는 지금 작동합니다!
수정해서 죄송합니다, 이상한 버그를 발견한 줄 알았는데 제 실수였습니다.

arkihillel 에 2017년 06월 13일

👍1

이미 안정적인 솔루션이 있습니까?
마우스를 사용하여 항목을 선택하면 이벤트(selectedItemChange)가 두 번 트리거됩니다. 첫 번째 항목은 새로 선택한 항목이고 두 번째 항목은 이전 항목입니다(선택 사항 변경 불가).
감사 해요.

JuanCalderon 에 2017년 08월 04일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

<p>vaadin-combo-box를 paper-dialog 안에 배치하면 경우에 따라 대화 상자가 닫힙니다.</p>

설명

예상되는 결과

실제 결과

라이브 데모

재현 단계

가장 유용한 댓글

모든 19 댓글

관련 문제