native select

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 $('<div>')

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,
             });
         }
     }

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;

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);

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"] {