diff --git a/client/src/ui/select.js b/client/src/ui/select.js
index 08a9a29049..43b17fed33 100644
--- a/client/src/ui/select.js
+++ b/client/src/ui/select.js
@@ -42,8 +42,6 @@ import Selectize from 'lib!selectize';
* @property {'value'|'text'|'$order'|'$score'} [sortBy='$order'] Item sorting.
* @property {'asc'|'desc'} [sortDirection='asc'] Sort direction.
* @property {function()} [onFocus] On-focus callback.
- * @property {boolean} [requestAnimationFrame] If many elements rendered on the same form, it significantly
- * boosts rendering performance.
*/
/**
@@ -121,7 +119,6 @@ const Select = {
allowEmptyOption: allowedValues.includes(''),
showEmptyOptionInDropdown: true,
$relativeParent: $relativeParent,
- requestAnimationFrame: options.requestAnimationFrame,
render: {
item: function (data) {
return $('
')
diff --git a/client/src/views/fields/enum.js b/client/src/views/fields/enum.js
index e42748c736..7e36805cef 100644
--- a/client/src/views/fields/enum.js
+++ b/client/src/views/fields/enum.js
@@ -101,7 +101,7 @@ class EnumFieldView extends BaseFieldView {
* @protected
* @type {boolean}
*/
- requestAnimationFrame = false
+ nativeSelect = false;
// noinspection JSCheckFunctionSignatures
/** @inheritDoc */
@@ -428,10 +428,9 @@ class EnumFieldView extends BaseFieldView {
this.$element.on('change', () => this.trigger('change'));
}
- if (this.isEditMode() || this.isSearchMode()) {
+ if ((this.isEditMode() || this.isSearchMode()) && !this.nativeSelect) {
Select.init(this.$element, {
matchAnyWord: true,
- requestAnimationFrame: this.requestAnimationFrame,
});
}
}
diff --git a/client/src/views/role/record/table.js b/client/src/views/role/record/table.js
index 59aebc4b13..d86c64c483 100644
--- a/client/src/views/role/record/table.js
+++ b/client/src/views/role/record/table.js
@@ -1216,7 +1216,7 @@ class RoleRecordTableView extends View {
class CustomEnumFieldView extends EnumFieldView {
- requestAnimationFrame = true
+ nativeSelect = true
}
export default RoleRecordTableView;
diff --git a/frontend/less/espo/elements/dropdown.less b/frontend/less/espo/elements/dropdown.less
index 8408cc6ac9..456a38d903 100644
--- a/frontend/less/espo/elements/dropdown.less
+++ b/frontend/less/espo/elements/dropdown.less
@@ -36,7 +36,8 @@
.selectize-dropdown,
.selectize-dropdown.form-control,
.autocomplete-suggestions,
-.ui-timepicker-wrapper {
+.ui-timepicker-wrapper,
+select.form-control::picker(select) {
border: var(--dropdown-border-width) solid var(--dropdown-border);
box-shadow: var(--dropdown-box-shadow);
border-radius: var(--dropdown-border-radius);
diff --git a/frontend/less/espo/elements/form.less b/frontend/less/espo/elements/form.less
index a224138151..916890d3f7 100644
--- a/frontend/less/espo/elements/form.less
+++ b/frontend/less/espo/elements/form.less
@@ -510,6 +510,78 @@ input[type="radio"].form-radio {
user-select: none;
}
+select.form-control {
+ &, &::picker(select) {
+ appearance: base-select;
+ }
+
+ &:open {
+ border-color: var(--input-border-focus);
+ outline: 0;
+ .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--input-border-focus-rgba)");
+ }
+
+ &::picker(select) {
+ }
+
+ option {
+ padding: var(--3px) var(--padding-base-horizontal);
+
+ &:first-child {
+ margin-top: var(--4px);
+ }
+
+ &:last-child {
+ margin-bottom: var(--4px);
+ }
+
+ &:focus-visible {
+ outline: var(--1px) solid var(--input-border-focus-rgba);
+ //outline-offset: var(--minus-1px);
+ }
+
+ &:hover {
+ background-color: var(--dropdown-link-hover-bg);
+ }
+ }
+
+ &::picker-icon {
+ color: var(--text-muted-color);
+ display: inline-block;
+ width: 0;
+ height: 0;
+ top: var(--16px);
+ right: var(--8px);
+ margin-left: var(--2px);
+ vertical-align: middle;
+ border-top: var(--4px) dashed;
+ border-right: var(--4px) solid transparent;
+ border-left: var(--4px) solid transparent;
+ position: absolute;
+ content: ' ';
+ }
+
+ &:has(option.text-success:checked) {
+ color: var(--state-success-text);
+ }
+
+ &:has(option.text-warning:checked) {
+ color: var(--state-warning-text);
+ }
+
+ &:has(option.text-danger:checked) {
+ color: var(--state-danger-text);
+ }
+
+ &:has(option.text-info:checked) {
+ color: var(--state-info-text);
+ }
+
+ &:has(option.text-primary:checked) {
+ color: var(--state-primary-text);
+ }
+}
+
/*
.link-container {
a[data-action="clearLink"] {