ui: autocomplete: fix component render

packages/components/frontend/autocomplete/autocomplete.scss

@@ -44,7 +44,7 @@
     height: 30px;
     box-sizing: border-box;
     padding: 4px 6px;
-    width: 0;
+    width: 100%;
     min-width: 30px;
     flex-grow: 1;
     border: 0;

packages/components/frontend/common.scss

@@ -3,7 +3,7 @@
 @use "sass:math";
 
 @function toRem($value) {
-    $remValue: math.div($value, 16) + rem; 
+    $remValue: calc($value / 16px) * 1rem;
     @return $remValue;
 }
 @function rem($values) {
@@ -63,7 +63,7 @@ $section-gap-v: 15px;
 $section-gap-h: $grid-padding;
 $section-list-v: 25px;
 $section-margin: 30px;
-$section-shadow: 0 rem(6px) rem(22px) rgba(#AFC2C9, 0.5);
+$section-shadow: rem(0 6px 22px) rgba(#AFC2C9, 0.5);
 $section-bg-color: $content-bg-color;
 $section-title-color: $header-2-color;
 $section-toolbtn-color: #AAA;
@@ -74,13 +74,13 @@ $userselect-uid-color: #BBB;
 
 $editor-border-color: $border-1-color;
 
-$datepicker-shadow: 0 rem(2px) rem(7px) rgba(#000, 0.3);
+$datepicker-shadow: rem(0 2px 7px) rgba(#000, 0.3);
 $datapicker-list-item-bg-color-hover: #F0F0F0;
 
 $dialog-layer-bg-color: rgba(#F0F0F0, 0.6);
 $dialog-bg-color: $content-bg-color;
 $dialog-border-color: $border-1-color;
-$dialog-shadow: 0 rem(2px) rem(10px) rgba(#000, 0.2);
+$dialog-shadow: rem(0 2px 10px) rgba(#000, 0.2);
 $dialog-title-color: $header-2-color;
 
 $comment-placeholder-color: #AAA;
@@ -88,10 +88,10 @@ $comment-op-color: lighten($text-1-color, 30%);
 $comment-op-link-color: lighten($text-1-color, 50%);
 
 $menu-item-bg-color-hover: #F4F4F4;
-$menu-drop-shadow: 0 rem(2px) rem(7px) rgba(#000, 0.3);
+$menu-drop-shadow: rem(0 2px 7px) rgba(#000, 0.3);
 $menu-drop-bg-color: $content-bg-color;
 $menu-drop-triangle-size: 4px;
-$menu-drop-triangle-shadow: rem(-2px) rem(-2px) rem(2px) rgba(#000, 0.15);
+$menu-drop-triangle-shadow: rem(-2px -2px 2px) rgba(#000, 0.15);
 
 $nav-item-height: 45px;
 $nav-item-hover-color: $primary-color;

packages/ui-default/components/autocomplete/CustomSelectAutoComplete.tsx

@@ -41,7 +41,7 @@ export default class CustomSelectAutoComplete<Multi extends boolean> extends Aut
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.createRoot(this.container).render(
+    this.component.render(
       <Component
         ref={(ref) => { this.ref = ref; }}
         data={this.options.data}

packages/ui-default/components/autocomplete/DomainSelectAutoComplete.tsx

@@ -31,7 +31,7 @@ export default class DomainSelectAutoComplete extends AutoComplete {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.createRoot(this.container).render(<Component
+    this.component.render(<Component
       ref={(ref) => { this.ref = ref; }}
       value={value}
       onChange={this.onChange}

packages/ui-default/components/autocomplete/FileSelectAutoComplete.tsx

@@ -44,7 +44,7 @@ export default class FileSelectAutoComplete<Multi extends boolean> extends AutoC
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.createRoot(this.container).render(
+    this.component.render(
       <Component
         ref={(ref) => { this.ref = ref; }}
         data={this.options.data}

packages/ui-default/components/autocomplete/ProblemSelectAutoComplete.tsx

@@ -31,7 +31,7 @@ export default class ProblemSelectAutoComplete extends AutoComplete {
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.createRoot(this.container).render(
+    this.component.render(
       <Component
         ref={(ref) => { this.ref = ref; }}
         value={value}

packages/ui-default/components/autocomplete/UserSelectAutoComplete.tsx

@@ -36,7 +36,7 @@ export default class UserSelectAutoComplete<Multi extends boolean> extends AutoC
 
   attach() {
     const value = this.$dom.val();
-    ReactDOM.createRoot(this.container).render(
+    this.component.render(
       <Component
         ref={(ref) => { this.ref = ref; }}
         value={value}

packages/ui-default/templates/layout/html5.html

@@ -40,7 +40,6 @@
   </style>
   {% if process.env.DEV %}
     <script src="/default.theme.js?version={{ global.Hydro.version['ui-default'] }}"></script>
-    <link rel="stylesheet" media="all" href="/theme.css?version={{ global.Hydro.version['ui-default'] }}">
   {% else %}
     <link rel="stylesheet" media="all" href="{{ UiContext.cdn_prefix }}theme-{{ global.Hydro.version['ui-default'] }}.css">
   {% endif %}