Skip to content

Instantly share code, notes, and snippets.

@feanor07
Last active April 25, 2019 16:06
Show Gist options
  • Save feanor07/0b92fae257f817943e595f78a0f8de11 to your computer and use it in GitHub Desktop.
Save feanor07/0b92fae257f817943e595f78a0f8de11 to your computer and use it in GitHub Desktop.
ember-power-select onfocus problem
import Ember from 'ember';
const {isBlank} = Ember;
export default Ember.Component.extend({
cities: ['Barcelona', 'London', 'New York', 'Porto'],
actions: {
handleFocus(select, e) {
if (this.focusComesFromOutside(e)) {
select.actions.open();
}
},
handleBlur() {
console.debug('EPS blurred!');
}
},
// Methods
focusComesFromOutside(e) {
let blurredEl = e.relatedTarget;
if (isBlank(blurredEl)) {
return false;
}
return !blurredEl.classList.contains('ember-power-select-search-input');
}
});
import Ember from 'ember';
export default Ember.Component.extend({
cities: ['Barcelona', 'London', 'New York', 'Porto'],
actions: {
handleFocus(select, e) {
if (this.focusComesFromOutside(e)) {
select.actions.open();
}
},
handleBlur() {
console.debug('EPS blurred!');
}
},
// Methods
focusComesFromOutside(e) {
let blurredEl = e.relatedTarget;
return !blurredEl || !blurredEl.classList.contains('ember-power-select-search-input');
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{original-onfocusexample}}
<br>
<br>
<hr>
{{modified-onfocusexample}}
This is modified version that seems to be working; but I am not confident about it!
<br>
<br>
<input type="text" placeholder="Focus me and press TAB to focus the select" style="line-height: 2; width: 100%">
<br>
<br>
{{#power-select
selected=selected
options=cities
onchange=(action (mut selected))
onfocus=(action "handleFocus")
onblur=(action "handleBlur")
as |name|
}}
{{name}}
{{/power-select}}
This is original <a href="http://www.ember-power-select.com/docs/action-handling">example</a>
<br>
If you choose an option with a mouse click; the select will not close up!
<br>
<br>
<input type="text" placeholder="Focus me and press TAB to focus the select" style="line-height: 2; width: 100%">
<br>
<br>
{{#power-select
selected=selected
options=cities
onchange=(action (mut selected))
onfocus=(action "handleFocus")
onblur=(action "handleBlur")
as |name|
}}
{{name}}
{{/power-select}}
{
"version": "0.11.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.10.2",
"ember-data": "2.11.0",
"ember-template-compiler": "2.10.2",
"ember-testing": "2.10.2"
},
"addons": {
"ember-power-select": "1.4.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment