From 8d2c3a034230b8b382308be7502781046132a747 Mon Sep 17 00:00:00 2001 From: Cyril Fluck Date: Thu, 10 Oct 2019 12:02:00 -0700 Subject: [PATCH 1/6] the fix? --- addon/components/select-component.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/addon/components/select-component.js b/addon/components/select-component.js index c946392f..bf43266b 100644 --- a/addon/components/select-component.js +++ b/addon/components/select-component.js @@ -675,11 +675,15 @@ export default Ember.Component.extend( }, focusIn: function() { - return this.set('hasFocus', true); + Ember.run.schedule('actions', () => { + this.set('hasFocus', true); + }); }, focusOut: function() { - return this.set('hasFocus', false); + Ember.run.schedule('actions', () => { + this.set('hasFocus', false); + }); }, actions: { From 893373bf7ea0541198f7d1a7dca4eb02c79e3736 Mon Sep 17 00:00:00 2001 From: Cyril Fluck Date: Thu, 10 Oct 2019 17:00:33 -0700 Subject: [PATCH 2/6] Another fix? --- addon/mixins/popover.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/mixins/popover.js b/addon/mixins/popover.js index 04fc92ec..af0a2ac2 100644 --- a/addon/mixins/popover.js +++ b/addon/mixins/popover.js @@ -42,7 +42,7 @@ export default Ember.Mixin.create(StyleBindingsMixin, BodyEventListener, { }).property('contentViewClass'), didInsertElement: function() { this._super(); - Ember.run.schedule('afterRender', this, () => { + Ember.run.schedule('actions', this, () => { this.snapToPosition(); this.set('visibility', 'visible'); this.set('isShowing', true); From bebcaceb87c602a66a4f65e06b5625bbcf8b17b6 Mon Sep 17 00:00:00 2001 From: Matthew Beale Date: Thu, 17 Oct 2019 15:02:47 -0400 Subject: [PATCH 3/6] Avoid state change during rendering * focus events may fire from child elements (like buttons) may fire during teardown of the DOM (un-rendering). These should be ignored by a parent component which only cared about input focus anyway. * Move work in the popover out of `didInsertElement` and into the `afterRender` queue. --- addon/components/select-component.js | 12 ++++++------ addon/mixins/popover.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/addon/components/select-component.js b/addon/components/select-component.js index bf43266b..c76e767a 100644 --- a/addon/components/select-component.js +++ b/addon/components/select-component.js @@ -674,16 +674,16 @@ export default Ember.Component.extend( return this.sendAction('userSelected', selection); }, - focusIn: function() { - Ember.run.schedule('actions', () => { + focusIn: function(event) { + if (event.target.tagName === 'INPUT') { this.set('hasFocus', true); - }); + } }, - focusOut: function() { - Ember.run.schedule('actions', () => { + focusOut: function(event) { + if (event.target.tagName === 'INPUT') { this.set('hasFocus', false); - }); + } }, actions: { diff --git a/addon/mixins/popover.js b/addon/mixins/popover.js index af0a2ac2..10a2ecf6 100644 --- a/addon/mixins/popover.js +++ b/addon/mixins/popover.js @@ -42,7 +42,7 @@ export default Ember.Mixin.create(StyleBindingsMixin, BodyEventListener, { }).property('contentViewClass'), didInsertElement: function() { this._super(); - Ember.run.schedule('actions', this, () => { + Ember.run.schedule('afterRender', () => { this.snapToPosition(); this.set('visibility', 'visible'); this.set('isShowing', true); From d13e6109ab5e688db8a2e57882e53ff22a907a69 Mon Sep 17 00:00:00 2001 From: Cyril Fluck Date: Fri, 18 Oct 2019 12:03:50 -0700 Subject: [PATCH 4/6] Revert change in focusIn / focusOut --- addon/components/select-component.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/addon/components/select-component.js b/addon/components/select-component.js index c76e767a..072171d8 100644 --- a/addon/components/select-component.js +++ b/addon/components/select-component.js @@ -675,15 +675,11 @@ export default Ember.Component.extend( }, focusIn: function(event) { - if (event.target.tagName === 'INPUT') { - this.set('hasFocus', true); - } + this.set('hasFocus', true); }, focusOut: function(event) { - if (event.target.tagName === 'INPUT') { - this.set('hasFocus', false); - } + this.set('hasFocus', false); }, actions: { From 01d234b355a49bddf3b99254a75ac8cefe07b8af Mon Sep 17 00:00:00 2001 From: Cyril Fluck Date: Fri, 18 Oct 2019 14:16:57 -0700 Subject: [PATCH 5/6] Use setFocus --- addon/components/select-component.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/addon/components/select-component.js b/addon/components/select-component.js index 072171d8..4c051c5a 100644 --- a/addon/components/select-component.js +++ b/addon/components/select-component.js @@ -540,14 +540,12 @@ export default Ember.Component.extend( } }), - setFocus: function() { - var activeElem, selectComponent; - activeElem = document.activeElement; - selectComponent = this.$()[0]; - if (selectComponent.contains(activeElem) || selectComponent === activeElem) { - return this.set('hasFocus', true); + setFocus: function(targetElement = document.activeElement) { + let selectComponent = this.$()[0]; + if (selectComponent.contains(targetElement) || selectComponent === targetElement) { + this.set('hasFocus', true); } else { - return this.set('hasFocus', false); + this.set('hasFocus', false); } }, @@ -675,11 +673,11 @@ export default Ember.Component.extend( }, focusIn: function(event) { - this.set('hasFocus', true); + this.setFocus(event.target); }, focusOut: function(event) { - this.set('hasFocus', false); + this.setFocus(event.target); }, actions: { From 4f700890b4aeacbd1902a91790bf6a7c6b96b237 Mon Sep 17 00:00:00 2001 From: Cyril Fluck Date: Fri, 18 Oct 2019 14:31:05 -0700 Subject: [PATCH 6/6] Code cleanup --- addon/components/select-component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/select-component.js b/addon/components/select-component.js index 4c051c5a..06820713 100644 --- a/addon/components/select-component.js +++ b/addon/components/select-component.js @@ -541,7 +541,7 @@ export default Ember.Component.extend( }), setFocus: function(targetElement = document.activeElement) { - let selectComponent = this.$()[0]; + let selectComponent = this.element; if (selectComponent.contains(targetElement) || selectComponent === targetElement) { this.set('hasFocus', true); } else {