2284 - Replace JQuery Autocompleter plugin by JQuery UI Autocomplete widget - fix autocomplete on short lists, tab and autoselect item when there is only one option

This commit is contained in:
acognet
2021-01-26 17:20:42 +01:00
parent c65a760de7
commit d39d634aba
3 changed files with 117 additions and 69 deletions

View File

@@ -13,29 +13,30 @@ $ibo-input-select-wrapper--after--color: $ibo-color-grey-900 !default;
$ibo-input-select--action-button--height: 28px !default;
$ibo-input-select--action-button--width: 23px !default;
$ibo-input-select--action-button--margin-top: 1px !default;
$ibo-input-select--action-button--margin-right: 20px !default;
$ibo-input-select--action-button--background-color: inherit !default;
$ibo-input-select--action-button--color: $ibo-color-grey-800 !default;
$ibo-input-select--action-button--padding-x: 4px !default;
$ibo-input-select--action-button--padding-y: 5px !default;
$ibo-input-select--action-button--padding-x: 2px !default;
$ibo-input-select--action-button--padding-y: 6px !default;
$ibo-input-select--action-button--hierarchy--margin-left: -60px !default;
$ibo-input-select--action-button--create--margin-left: -38px !default;
$ibo-input-select--action-button--search--margin-left: -60px !default;
$ibo-input-select--action-button--clear--margin-left: -72px !default;
$ibo-input-select-autocomplete-action-button--hierarchy--margin-left: -92px !default;
$ibo-input-select--action-button--padding-left: 5px !default;
.ibo-input-select{
appearance: none;
display: inline-block;
&.ibo-input-selectize{
padding-right:0;
padding-left:0;
input{
display: none;
border-width: 0px;
border-color: white;
padding-left:$ibo-input--padding-x;
}
>[data-value]
{
height: $ibo-input-select-selectize--value--height;
line-height: $ibo-input-select-selectize--value--line-height;
padding-left:$ibo-input--padding-x;
}
}
}
@@ -63,33 +64,24 @@ $ibo-input-select-autocomplete-action-button--hierarchy--margin-left: -92px !def
color: $ibo-input-select-wrapper--after--color;
pointer-events: none;
}
.ibo-input-select--action-button{
position: absolute;
display: inline-block;
height: $ibo-input-select--action-button--height;
width: $ibo-input-select--action-button--width;
margin-top: $ibo-input-select--action-button--margin-top;
font-size: $ibo-font-size-100;
background-color: $ibo-input-select--action-button--background-color;
color: $ibo-input-select--action-button--color;
padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x;
&.ibo-input-select--action-button--hierarchy{
margin-left: $ibo-input-select--action-button--hierarchy--margin-left;
}
&.ibo-input-select--action-button--create{
margin-left: $ibo-input-select--action-button--create--margin-left;
}
&.ibo-input-select--action-button--search{
margin-left: $ibo-input-select--action-button--search--margin-left;
}
&.ibo-input-select--action-button--clear{
margin-left: $ibo-input-select--action-button--clear--margin-left;
}
.ibo-input-select--action-buttons{
position: absolute;
display: initial;
height: $ibo-input-select--action-button--height;
margin-top: $ibo-input-select--action-button--margin-top;
margin-right: $ibo-input-select--action-button--margin-right;
font-size: $ibo-font-size-100;
background-color: $ibo-input-select--action-button--background-color;
color: $ibo-input-select--action-button--color;
padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x;
text-align: right;
right:0;
}
.ibo-input-select-autocomplete ~ .ibo-input-select--action-button--hierarchy{
margin-left: $ibo-input-select-autocomplete-action-button--hierarchy--margin-left;
.ibo-input-select--action-button{
padding-left: $ibo-input-select--action-button--padding-left;
float:right;
}
.selectize-dropdown{
@@ -100,3 +92,14 @@ $ibo-input-select-autocomplete-action-button--hierarchy--margin-left: -92px !def
background-color: #f5fafd;
color: #495c68;
}
//from jqueryui.css
.ui-helper-hidden-accessible {
// border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}