From 9282aa68715c088e9c8fcd915e78fb7ae91f551f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 1 Mar 2021 15:36:29 -0500 Subject: [PATCH] fix(label): only show placeholder with floating label when focused (#22958) fixes #17571 --- core/src/components/input/input.scss | 15 ++ core/src/components/input/input.tsx | 26 ++- .../components/input/test/basic/index.html | 4 +- .../src/components/input/test/spec/index.html | 183 ++++++++++++++++-- core/src/components/label/label.ios.scss | 2 - core/src/components/label/label.md.scss | 1 - 6 files changed, 199 insertions(+), 32 deletions(-) diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index fed9c749ad..d0c1a28802 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -169,3 +169,18 @@ :host(.has-focus) button { pointer-events: auto; } + + +// Item Floating: Placeholder +// ---------------------------------------------------------------- +// When used with a floating item the placeholder should hide + +:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) { + transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); + + opacity: 0; +} + +:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) { + opacity: 1; +} diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 6b579e2012..8615969850 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -190,15 +190,6 @@ export class Input implements ComponentInterface { */ @Prop({ mutable: true }) value?: string | number | null = ''; - /** - * Update the native input element when the value changes - */ - @Watch('value') - protected valueChanged() { - this.emitStyle(); - this.ionChange.emit({ value: this.value == null ? this.value : this.value.toString() }); - } - /** * Emitted when a keyboard input occurred. */ @@ -225,6 +216,23 @@ export class Input implements ComponentInterface { */ @Event() ionStyle!: EventEmitter; + /** + * Update the item classes when the placeholder changes + */ + @Watch('placeholder') + protected placeholderChanged() { + this.emitStyle(); + } + + /** + * Update the native input element when the value changes + */ + @Watch('value') + protected valueChanged() { + this.emitStyle(); + this.ionChange.emit({ value: this.value == null ? this.value : this.value.toString() }); + } + componentWillLoad() { this.inheritedAttributes = inheritAttributes(this.el, ['tabindex', 'title']); } diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html index aa8a3cc3c1..48b543e4c1 100644 --- a/core/src/components/input/test/basic/index.html +++ b/core/src/components/input/test/basic/index.html @@ -132,11 +132,11 @@ Right - diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss index 3067e24515..6d6ac30427 100644 --- a/core/src/components/label/label.ios.scss +++ b/core/src/components/label/label.ios.scss @@ -35,12 +35,10 @@ } :host-context(.item-has-focus).label-floating, -:host-context(.item-has-placeholder).label-floating, :host-context(.item-has-value).label-floating { @include transform(translate3d(0, 0, 0), scale(.82)); } - // iOS Typography // -------------------------------------------------- diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss index 5a773408d2..b63bf71424 100644 --- a/core/src/components/label/label.md.scss +++ b/core/src/components/label/label.md.scss @@ -39,7 +39,6 @@ } :host-context(.item-has-focus).label-floating, -:host-context(.item-has-placeholder).label-floating, :host-context(.item-has-value).label-floating { @include transform(translateY(50%), scale(.75)); }