Fix premature close with content placed over trigger #1335
Conversation
|
@cibernox let me know if you have any feedback or thoughts on this. Also happy to split out the test fixes into a separate PR if you prefer that. |
|
Also note there are some unrelated test failures for some ember-try build scenarios. These started occurring recently in other PRs as well, for example: https://travis-ci.org/cibernox/ember-power-select/jobs/653542073?utm_medium=notification&utm_source=github_status EDIT/UPDATE: have posted this PR cibernox/ember-basic-dropdown#534 to address test/build failures in Ember Basic Dropdown. If that PR gets merged and we tag a new release, we should be able to get the tests passing here as well. UPDATE 2: this PR has been rebased with Ember Basic Dropdown update, and tests are now passing on Travis, though success status is not being reported yet here. @cibernox thoughts on merging this? |
### Related issues - Addresses #1334 - Addresses #1282 - Addresses #1263 ### Background Using a value of `mousedown` for the `eventType` that is set on the Ember Basic Dropdown trigger is problematic in some cases, especially when content overlaps the trigger. The reason for this is that the subsequent `mouseup` event handler that is set in the `addHandlers` action in the `options.ts` file is triggered immediately after the `mousedown` that opens the dropdown content in the first place. The `mouseup` event handler calls `findOptionAndPerform` which will select any valid, (though in this case accidentally) highlighted option and then immediate close the dropdown when it makes the selection. Note that even if the above `mouseup` event listener is bypassed, Ember Basic Dropdown _will still immediately close_ the dropdown, though this time without Power Select having made a selection. This happens because, in the `basic-dropdown-content.ts` file, in the `setup` action adds a `click` event listener (based on the value of `this.args.rootEventType`) to the document, to ensure the content is closed when the user clicks away from the menu.... but when the resulting `handleRootMouseDown` function is called the `click` event target is `body`, which signals EBD to close the content. It's not clear to me why the `target` is `body` in this function, but I suspect it may be related to the `mousedown` and `mouseup` targets differing here, when the content appears above the trigger. Specifying `@eventType='click'` instead bypasses both problems because `click` is fired _only after_ the `mousedown` and `mouseup` events, resulting in more predictable behavior, regardless of location of the content in relation to the trigger. ### Other Notes - Also fixes unrelated, intermittent test failures ### Related, alternative PR - #1333
Copied from cibernox#1335 but applied on ember-power-select v3.x
Applies fix of cibernox/ember-power-select#1335 on ember-power-select 3.x
|
Closing my PR due to lack of activity. |
Related issues
Background
Using a value of
mousedownfor theeventTypethat is set on the Ember Basic Dropdown trigger is problematic in some cases, especially when content overlaps the trigger. The reason for this is that the subsequentmouseupevent handler that is set in theaddHandlersaction in theoptions.tsfile is triggered immediately after themousedownthat opens the dropdown content in the first place. Themouseupevent handler callsfindOptionAndPerformwhich will select any valid, (though in this case accidentally) highlighted option and then immediate close the dropdown when it makes the selection.Note that even if the above
mouseupevent listener is bypassed, Ember Basic Dropdown will still immediately close the dropdown, though this time without Power Select having made a selection. This happens because, in thebasic-dropdown-content.tsfile, in thesetupaction adds aclickevent listener (based on the value ofthis.args.rootEventType) to the document, to ensure the content is closed when the user clicks away from the menu.... but when the resultinghandleRootMouseDownfunction is called theclickevent target isbody, which signals EBD to close the content. It's not clear to me why thetargetisbodyin this function, but I suspect it may be related to themousedownandmouseuptargets differing here, when the content appears above the trigger.Specifying
@eventType='click'instead bypasses both problems becauseclickis fired only after themousedownandmouseupevents, resulting in more predictable behavior, regardless of location of the content in relation to the trigger.Other Notes
Related, alternative PR