Search input closes immediately after focus

[pjcarly]

After upgrading to version version 3.0.4, I noticed a behaviour change in the application that I cant immediately figure out.

I have a component like this:

<PowerSelect 
  @class="search-input" 
  @searchMessage="Search"  
  @searchMessageComponent={{component "recently-viewed" recordSelected=(action "recentlyViewedRecordSelected")}}
  @placeholder={{@placeholder}} 
  @search={{perform this.searchTask}} 
  @searchEnabled={{true}}
  @onChange={{action "valueChanged"}} 
  @onFocus={{action "handleFocus"}} 
  @renderInPlace={{true}} as |model|>
  <div class="search-result">
    <div class="name">
      {{model.name}}
    </div>
    <div class="type">
      {{model.constructor.modelName}}
    </div>
  </div>
</PowerSelect>

On focus of the Component, I want to display a list of recently viewed records, which I could accomplish with @searchMessageComponent (this does seem to be missing from the documentation, but is still in the codebase)

The issue i'm seeing now, is that:

• on focus, the component im trying to use is displayed and immediately closed.
• clicking power-select, and holding the mouse button down, keeps the component open, until release of the mouse button
• when manually opening the search input, through the public api (element.actions.open();) it works as it should.

I narrowed down the code that closes the addon to here: https://github.com/cibernox/ember-basic-dropdown/blob/b60127457821069cf288a7008c6ec2f787a69497/addon/components/basic-dropdown-content.js#L125

[pjcarly]

After some more tinkering, I managed to relate it to the @renderInPlace={{true}} attribute

• This does not seem to be related to the searchMessageComponent, without it, I have the same issue.
• Only when renderInPlace is set to true the issue happens
• Does not seem to happen in Firefox, but it does seem to happen in Chrome (version 77)

[pjcarly]

Alright. Narrowed it down completely.

If you apply the CSS styling top: 0 on the ember-basic-dropdown-content element (in order for the input element to cover the trigger completely). The issue happens.

My guess is that chrome somehow triggers a click element on the document, and incorrectly assumes that the click is outside the select element.

[cibernox]

@pjcarly do you have any idea of what the fix would be? I also fail to see why this would have changed in 3.0. The logic is mostly a 1:1 translation to new patterns, but the same events are being handled.

[pjcarly]

I have no idea, only thing I can say is that I upgraded from v2.2.2, and there it is working with top: 0. For now I have disabled the top: 0 and I can use it.

[AndreJoaquim]

@pjcarly I've exactly the same issue after upgrading to v3. How did you disable the top: 0?

[pjcarly]

I just removed it in my css stylesheet ¯\_(ツ)_/¯

[fpauser]

Same issue here: This also happens in Firefox (recent version)

[patricklx]

same issue for me... some change how did-insert works? or events in general might be handled faster? looks like it this document.addEventListener(this.rootEventType, this.handleRootMouseDown, true); (in basic-dropdown-content.js) is called during the onMouseDown event phase. So, afterwardsr onMouseClick gets invoked and runs that code and then closes it :( Adding a delay in the setup function would probably fix it (or after OnMouseClick/onMouseDown?)

edit: just noticed this is in basic dropdown.... edit: changed the eventType to click and now it works fine

[erikmellum]

Any update on this issue?

[pragatheeswaranshf]

@cibernox There are a couple of PRs linked to this issue. Any update on this would be very much helpful for our upgrade. Thanks.

[ganapathyHf]

@cibernox Any update on this?

[mbernwieser]

Can confirm what @patricklx said: setting the eventType to click works:

[bmfay]

FWIW, setting eventType to "click" did not work for me and I am seeing this issue regardless of the renderInPlace setting. The only solution I was able to find was moving it out of the table row it was in.