mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-29 10:50:03 +02:00
Function to handle input width sizing + minor tweaks
This commit is contained in:
parent
378c6dbafa
commit
ca0541b91a
|
@ -810,7 +810,7 @@ class Choices {
|
||||||
clearInput() {
|
clearInput() {
|
||||||
if (this.input.value) this.input.value = '';
|
if (this.input.value) this.input.value = '';
|
||||||
if (this.passedElement.type !== 'select-one') {
|
if (this.passedElement.type !== 'select-one') {
|
||||||
this.input.style.width = getWidthOfInput(this.input);
|
this._setInputWidth();
|
||||||
}
|
}
|
||||||
if (this.passedElement.type !== 'text' && this.config.search) {
|
if (this.passedElement.type !== 'text' && this.config.search) {
|
||||||
this.isSearching = false;
|
this.isSearching = false;
|
||||||
|
@ -1009,7 +1009,7 @@ class Choices {
|
||||||
// we can edit the item value. Otherwise if we can remove items, remove all selected items
|
// we can edit the item value. Otherwise if we can remove items, remove all selected items
|
||||||
if (this.config.editItems && !hasHighlightedItems && lastItem) {
|
if (this.config.editItems && !hasHighlightedItems && lastItem) {
|
||||||
this.input.value = lastItem.value;
|
this.input.value = lastItem.value;
|
||||||
this.input.style.width = getWidthOfInput(this.input);
|
this._setInputWidth();
|
||||||
this._removeItem(lastItem);
|
this._removeItem(lastItem);
|
||||||
this._triggerChange(lastItem.value);
|
this._triggerChange(lastItem.value);
|
||||||
} else {
|
} else {
|
||||||
|
@ -1238,6 +1238,26 @@ class Choices {
|
||||||
this.input.removeEventListener('blur', this._onBlur);
|
this.input.removeEventListener('blur', this._onBlur);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the correct input width based on placeholder
|
||||||
|
* value or input value
|
||||||
|
* @return
|
||||||
|
*/
|
||||||
|
_setInputWidth() {
|
||||||
|
if (this.config.placeholder && (this.config.placeholderValue || this.passedElement.getAttribute('placeholder'))) {
|
||||||
|
// 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.
|
||||||
|
const placeholder = this.config.placeholder ? this.config.placeholderValue ||
|
||||||
|
this.passedElement.getAttribute('placeholder') : false;
|
||||||
|
if (this.input.value && this.input.value.length >= (placeholder.length / 1.25)) {
|
||||||
|
this.input.style.width = getWidthOfInput(this.input);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// If there is no placeholder, resize input to contents
|
||||||
|
this.input.style.width = getWidthOfInput(this.input);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Key down event
|
* Key down event
|
||||||
* @param {Object} e Event
|
* @param {Object} e Event
|
||||||
|
@ -1444,18 +1464,7 @@ class Choices {
|
||||||
*/
|
*/
|
||||||
_onInput() {
|
_onInput() {
|
||||||
if (this.passedElement.type !== 'select-one') {
|
if (this.passedElement.type !== 'select-one') {
|
||||||
if (this.config.placeholder && (this.config.placeholderValue || this.passedElement.getAttribute('placeholder'))) {
|
this._setInputWidth();
|
||||||
// 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.
|
|
||||||
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') :
|
|
||||||
false;
|
|
||||||
if (this.input.value && this.input.value.length >= (placeholder.length / 1.25)) {
|
|
||||||
this.input.style.width = getWidthOfInput(this.input);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// If there is no placeholder, resize input to contents
|
|
||||||
this.input.style.width = getWidthOfInput(this.input);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -220,6 +220,7 @@
|
||||||
border-bottom-left-radius: 2.5px;
|
border-bottom-left-radius: 2.5px;
|
||||||
border-bottom-right-radius: 2.5px;
|
border-bottom-right-radius: 2.5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choices__list--dropdown.is-active {
|
.choices__list--dropdown.is-active {
|
||||||
|
|
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -192,6 +192,7 @@ $choices-button-offset: 8px !default;
|
||||||
border-bottom-left-radius: $choices-border-radius;
|
border-bottom-left-radius: $choices-border-radius;
|
||||||
border-bottom-right-radius: $choices-border-radius;
|
border-bottom-right-radius: $choices-border-radius;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
&.is-active { display: block; }
|
&.is-active { display: block; }
|
||||||
.is-open & { border-color: darken($choices-keyline-color, 15%); }
|
.is-open & { border-color: darken($choices-keyline-color, 15%); }
|
||||||
.is-flipped & {
|
.is-flipped & {
|
||||||
|
|
Loading…
Reference in a new issue