Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Component Blur Demo
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
<h1>Component Blur Demo</h1>
<br>
<br>
<h2>my-component</h2>
{{my-component}}
<br>
<br>
<h2>other-component</h2>
<p>(also works)</p>
{{other-component}}
<br>
<br>
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['focus-box'],
attributeBindings: ['tabindex'],
'tabindex': 1000,
hasFocus: false,
focusIn() {
this.set('hasFocus', true);
},
focusOut() {
this.set('hasFocus', false);
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['focus-box'],
attributeBindings: ['tabindex'],
tabindex: -1,
focusOutCount: 0,
hasFocus: false,
focusOut() {
this.set('hasFocus', false);
},
focusIn() {
this.incrementProperty('focusOutCount');
this.set('hasFocus', true);
}
});
<p>
This component box is {{if hasFocus 'focused' 'blurred'}}.
</p>
<p>
Click anywhere outside it's box to blur it. Focus out count: {{focusOutCount}}
</p>
<h3>clicking in me doesn't blur</h3>
<input type="text">
{{#if hasFocus}}
<h3>clicking in me doesn't blur either</h3>
{{/if}}
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
background: #444;
color: #f0bf50;
}
.focus-box {
padding: 1em;
border: 1px solid #bbb;
background: #666;
}
.focus-box:focus {
outline: none;
}
<p>
This component box is {{if hasFocus 'focused' 'blurred'}}.
</p>
<p>
Click anywhere outside it's box to blur it.
</p>
{
"version": "0.6.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
}
}
@knownasilya

This comment has been minimized.

Copy link

commented Mar 3, 2016

Didn't know this.element was a thing..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.