kopia lustrzana https://github.com/shoelace-style/shoelace
fix clear button clicks
rodzic
7f87887477
commit
25b00281f4
|
@ -24,6 +24,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
||||||
- Fixed a bug in `<sl-select>` where the tag size wouldn't update with the control's size [#1886]
|
- Fixed a bug in `<sl-select>` where the tag size wouldn't update with the control's size [#1886]
|
||||||
- Fixed a bug in `<sl-checkbox>` and `<sl-switch>` where the color of the required content wasn't applying correctly
|
- Fixed a bug in `<sl-checkbox>` and `<sl-switch>` where the color of the required content wasn't applying correctly
|
||||||
- Fixed a bug in `<sl-checkbox>` where help text was incorrectly styled [#1897]
|
- Fixed a bug in `<sl-checkbox>` where help text was incorrectly styled [#1897]
|
||||||
|
- Fixed a bug in `<sl-input>` that prevented the control from receiving focus when clicking over the clear button
|
||||||
|
|
||||||
## 2.14.0
|
## 2.14.0
|
||||||
|
|
||||||
|
|
|
@ -251,13 +251,16 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleClearClick(event: MouseEvent) {
|
private handleClearClick(event: MouseEvent) {
|
||||||
this.value = '';
|
event.preventDefault();
|
||||||
this.emit('sl-clear');
|
|
||||||
this.emit('sl-input');
|
|
||||||
this.emit('sl-change');
|
|
||||||
this.input.focus();
|
|
||||||
|
|
||||||
event.stopPropagation();
|
if (this.value !== '') {
|
||||||
|
this.value = '';
|
||||||
|
this.emit('sl-clear');
|
||||||
|
this.emit('sl-input');
|
||||||
|
this.emit('sl-change');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.input.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleFocus() {
|
private handleFocus() {
|
||||||
|
@ -493,14 +496,11 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
|
||||||
@blur=${this.handleBlur}
|
@blur=${this.handleBlur}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
${hasClearIcon
|
${isClearIconVisible
|
||||||
? html`
|
? html`
|
||||||
<button
|
<button
|
||||||
part="clear-button"
|
part="clear-button"
|
||||||
class=${classMap({
|
class="input__clear"
|
||||||
input__clear: true,
|
|
||||||
'input__clear--visible': isClearIconVisible
|
|
||||||
})}
|
|
||||||
type="button"
|
type="button"
|
||||||
aria-label=${this.localize.term('clearEntry')}
|
aria-label=${this.localize.term('clearEntry')}
|
||||||
@click=${this.handleClearClick}
|
@click=${this.handleClearClick}
|
||||||
|
|
|
@ -247,10 +247,6 @@ export default css`
|
||||||
* Clearable + Password Toggle
|
* Clearable + Password Toggle
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.input__clear:not(.input__clear--visible) {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input__clear,
|
.input__clear,
|
||||||
.input__password-toggle {
|
.input__password-toggle {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
@ -275,10 +271,6 @@ export default css`
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input--empty .input__clear {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Don't show the browser's password toggle in Edge */
|
/* Don't show the browser's password toggle in Edge */
|
||||||
::-ms-reveal {
|
::-ms-reveal {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
Ładowanie…
Reference in New Issue