From 7f6668790d24f2ce8acda7b54b799f1d6971c8a7 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 24 May 2019 11:26:21 -0700 Subject: [PATCH 1/4] Set value and fire a change event, close #1632 --- .../lib/effects/set-element-value.effect.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/browser-sync-client/lib/effects/set-element-value.effect.ts b/packages/browser-sync-client/lib/effects/set-element-value.effect.ts index b1b7731eb..502887e90 100644 --- a/packages/browser-sync-client/lib/effects/set-element-value.effect.ts +++ b/packages/browser-sync-client/lib/effects/set-element-value.effect.ts @@ -5,6 +5,8 @@ import { tap } from "rxjs/operators/tap"; import { withLatestFrom } from "rxjs/operators/withLatestFrom"; import { EffectNames } from "../effects"; +const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set; + export function setElementValueEffect( xs: Observable, inputs: Inputs @@ -15,7 +17,10 @@ export function setElementValueEffect( const elems = document.getElementsByTagName(event.tagName); const match = elems[event.index]; if (match) { - (match as HTMLInputElement).value = event.value; + const input = match as HTMLInputElement; + // Call native value setter and fire a change event + nativeInputValueSetter.call(input, event.value); + input.dispatchEvent(new Event('change', { bubbles: true})); } }) ); From 850c98b245f833084cdb99187e394be21415d978 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 24 May 2019 16:37:35 -0700 Subject: [PATCH 2/4] supports HTMLInputElement and HTMLTextAreaElement --- .../lib/effects/set-element-value.effect.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/browser-sync-client/lib/effects/set-element-value.effect.ts b/packages/browser-sync-client/lib/effects/set-element-value.effect.ts index 502887e90..a929e4bc3 100644 --- a/packages/browser-sync-client/lib/effects/set-element-value.effect.ts +++ b/packages/browser-sync-client/lib/effects/set-element-value.effect.ts @@ -5,8 +5,6 @@ import { tap } from "rxjs/operators/tap"; import { withLatestFrom } from "rxjs/operators/withLatestFrom"; import { EffectNames } from "../effects"; -const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set; - export function setElementValueEffect( xs: Observable, inputs: Inputs @@ -17,10 +15,9 @@ export function setElementValueEffect( const elems = document.getElementsByTagName(event.tagName); const match = elems[event.index]; if (match) { - const input = match as HTMLInputElement; - // Call native value setter and fire a change event - nativeInputValueSetter.call(input, event.value); - input.dispatchEvent(new Event('change', { bubbles: true})); + const nativeInputValueSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(match), 'value').set; + nativeInputValueSetter.call(match, event.value); + match.dispatchEvent(new Event('change', { bubbles: true })); } }) ); From 3809bc46a19d3d5e010b6e040557f9f9ab8b3abd Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 24 May 2019 16:42:34 -0700 Subject: [PATCH 3/4] use 4 spaces format --- .../lib/effects/set-element-value.effect.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/browser-sync-client/lib/effects/set-element-value.effect.ts b/packages/browser-sync-client/lib/effects/set-element-value.effect.ts index a929e4bc3..d0d4be1d9 100644 --- a/packages/browser-sync-client/lib/effects/set-element-value.effect.ts +++ b/packages/browser-sync-client/lib/effects/set-element-value.effect.ts @@ -15,9 +15,9 @@ export function setElementValueEffect( const elems = document.getElementsByTagName(event.tagName); const match = elems[event.index]; if (match) { - const nativeInputValueSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(match), 'value').set; - nativeInputValueSetter.call(match, event.value); - match.dispatchEvent(new Event('change', { bubbles: true })); + const nativeInputValueSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(match), 'value').set; + nativeInputValueSetter.call(match, event.value); + match.dispatchEvent(new Event('change', { bubbles: true })); } }) ); From 107cd07ed5fd6d9d286f7b66c40c3905abae2b4d Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 24 May 2019 16:44:56 -0700 Subject: [PATCH 4/4] make it also works for SELECT --- .../lib/effects/set-element-toggle-value.effect.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/browser-sync-client/lib/effects/set-element-toggle-value.effect.ts b/packages/browser-sync-client/lib/effects/set-element-toggle-value.effect.ts index c335dbba6..62fc7e4cf 100644 --- a/packages/browser-sync-client/lib/effects/set-element-toggle-value.effect.ts +++ b/packages/browser-sync-client/lib/effects/set-element-toggle-value.effect.ts @@ -22,7 +22,9 @@ export function setElementToggleValueEffect( match.checked = event.checked; } if (event.tagName === "SELECT") { - match.value = event.value; + const nativeInputValueSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(match), 'value').set; + nativeInputValueSetter.call(match, event.value); + match.dispatchEvent(new Event('change', { bubbles: true })); } } })