Amend copy

This commit is contained in:
Josh Johnson 2018-05-29 20:39:40 +01:00
parent 3886cbbd5c
commit 129d01c396
2 changed files with 11 additions and 12 deletions

View file

@ -281,7 +281,7 @@
<hr> <hr>
<h2>Form interaction</h2> <h2>Form interaction</h2>
<p>Change the values and press reset (The select must be in a form element)</p> <p>Change the values and press reset to restore to initial state.</p>
<form> <form>
<label for="reset-simple">Change me!</label> <label for="reset-simple">Change me!</label>
<select class="form-control" name="reset-simple" id="reset-simple" placeholder="Choose an option"> <select class="form-control" name="reset-simple" id="reset-simple" placeholder="Choose an option">

View file

@ -95,23 +95,22 @@ export default class Input {
* @return * @return
*/ */
setWidth(enforceWidth) { setWidth(enforceWidth) {
const callback = width => {
this.element.style.width = width;
};
if (this._placeholderValue) { if (this._placeholderValue) {
// If there is a placeholder, we only want to set the width of the input when it is a greater // If there is a placeholder, we only want to set the width of the input when it is a greater
// length than 75% of the placeholder. This stops the input jumping around. // length than 75% of the placeholder. This stops the input jumping around.
if ( const valueHasDesiredLength =
(this.element.value && this.element.value.length >= this._placeholderValue.length / 1.25;
this.element.value.length >= this._placeholderValue.length / 1.25) ||
enforceWidth if ((this.element.value && valueHasDesiredLength) || enforceWidth) {
) { this.calcWidth(callback);
this.calcWidth(width => {
this.element.style.width = width;
});
} }
} else { } else {
// If there is no placeholder, resize input to contents // If there is no placeholder, resize input to contents
this.calcWidth(width => { this.calcWidth(callback);
this.element.style.width = width;
});
} }
} }