>>> continue

dist/styles/bootstrap-darkster.css

@@ -9993,6 +9993,13 @@ h3 {
     border-color: rgba(255, 255, 255, 0.3);
   }
 }
+.custom-select:disabled[readonly],
+.form-control[readonly] {
+  background-color: #000000;
+  color: #6c757d;
+  border-style: dashed;
+}
+
 .with-icon-font {
   font-family: ForkAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }

dist/styles/bootstrap-default.css

@@ -9945,6 +9945,13 @@ h3 {
     border-color: #dee2e6;
   }
 }
+.custom-select:disabled[readonly],
+.form-control[readonly] {
+  background-color: #fff;
+  color: #6c757d;
+  border-style: dashed;
+}
+
 .with-icon-font {
   font-family: ForkAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }

dist/styles/bootstrap-greyson.css

@@ -9701,6 +9701,13 @@ h3 {
     border-color: #dee2e6;
   }
 }
+.custom-select:disabled[readonly],
+.form-control[readonly] {
+  background-color: #fff;
+  color: #6c757d;
+  border-style: dashed;
+}
+
 .with-icon-font {
   font-family: ForkAwesome, Muli;
 }

dist/styles/bootstrap-herbie.css

@@ -9933,6 +9933,13 @@ h3 {
     border-color: #dee2e6;
   }
 }
+.custom-select:disabled[readonly],
+.form-control[readonly] {
+  background-color: #fff;
+  color: #6c757d;
+  border-style: dashed;
+}
+
 .with-icon-font {
   font-family: ForkAwesome, Nunito;
 }

dist/styles/bootstrap-monotony.css

@@ -9950,6 +9950,13 @@ h3 {
     border-color: #dee2e6;
   }
 }
+.custom-select:disabled[readonly],
+.form-control[readonly] {
+  background-color: #fff;
+  color: #6c757d;
+  border-style: dashed;
+}
+
 .with-icon-font {
   font-family: ForkAwesome, Montserrat;
 }

dist/styles/sass.css

@@ -1666,7 +1666,9 @@ i.how:hover span {
 }
 .phylo-topbar__suggestion {
   pointer-events: none;
-  color: silver;
+}
+.phylo-topbar__suggestion.form-control {
+  border-color: transparent;
 }
 .phylo-topbar__search {
   z-index: 1;
@@ -1675,5 +1677,8 @@ i.how:hover span {
 .phylo-topbar__search.form-control {
   background-color: transparent;
 }
+.phylo-topbar__submit {
+  display: none;
+}
 
 /*# sourceMappingURL=sass.css.map */

src/Gargantext/Components/PhyloExplorer/Draw.purs

@@ -249,27 +249,6 @@ highlightSource window value =
         >>= D3S.classed "peak-focus-source" true
 
 
--- autocompleteSearch :: Document -> Array GlobalTerm -> String -> Effect Unit
--- autocompleteSearch d terms query =
---   let
---     hasMinLen = String.length >>> (_ > 0)
-
---   in do
---     mEl  <- querySelector d "#search-autocomplete"
---     term <- pure
-
---       if hasMinLen query
---       then findGlobalTermByPrefix terms query
---       else Nothing
-
---     case term of
---       Nothing                     -> pure unit
---       Just (GlobalTerm { label }) -> case mEl of
-
---         Nothing -> pure unit
---         Just el -> (void <<< pure <<< setProperty "value" el) label
 autocompleteSearch ::
      Array GlobalTerm
   -> String
@@ -284,15 +263,6 @@ autocompleteSearch terms query =
     then findGlobalTermByPrefix terms query
     else Nothing
 
--- autocompleteSubmit :: Array GlobalTerm -> String -> Effect Unit
--- autocompleteSubmit terms query = do
---   term <- pure $ findGlobalTermByPrefix terms query
-
---   case term of
---     Nothing                          -> pure unit
---     Just (GlobalTerm { label, fdt }) -> do
 
 autocompleteSubmit :: Maybe (GlobalTerm) -> Effect Unit
 autocompleteSubmit = case _ of

src/Gargantext/Components/PhyloExplorer/TopBar.purs

@@ -4,7 +4,6 @@ module Gargantext.Components.PhyloExplorer.TopBar
 
 import Gargantext.Prelude
 
-import DOM.Simple.Console (log)
 import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
@@ -93,13 +92,12 @@ topBarCpt = here.component "main" cpt where
       ,
         -- Search
         H.form
-        { on: { submit: onAutocompleteSubmit }
-        , className: "phylo-topbar__autocomplete"
+        { className: "phylo-topbar__autocomplete"
         }
         [
           B.formInput
           { className: "phylo-topbar__suggestion"
-          -- , status: Disabled
+          , status: Idled
           , value: case result of
               Nothing                     -> ""
               Just (GlobalTerm { label }) -> label
@@ -113,5 +111,12 @@ topBarCpt = here.component "main" cpt where
           , value: search
           , placeholder: "Find a term"
           }
+        ,
+          B.button
+          { callback: onAutocompleteSubmit
+          , type: "submit"
+          , className: "phylo-topbar__submit"
+          }
+          [ H.text "" ]
         ]
       ]

src/sass/_phylo.scss

@@ -567,16 +567,26 @@ i.how:hover span {
   }
 
   &__suggestion {
+    // as the input is above the "search" one, and is used only as an
+    // autocompletion term, we remove every interaction on it...
     pointer-events: none;
-    color: silver;
+    // ...overriding Bootstrap native rules to just display its text node to
+    // the user
+    &.form-control {
+      border-color: transparent;
+    }
   }
 
   &__search {
     z-index: 1;
     position: absolute;
-    // overriding Bootstrap native bgcolor
+    // (see above comment about "suggestion")
     &.form-control {
       background-color: transparent;
     }
   }
+
+  &__submit {
+    display: none;
+  }
 }

src/sass/bootstrap/_common.scss

@@ -26,6 +26,19 @@
 /// BASE
 /// ############################################################################
 
+/// Bootstrap customisation
+///-----------------------------------------------------------------------------
+
+
+// Rectify readonly UI
+.custom-select:disabled[readonly],
+.form-control[readonly] {
+  background-color: $input-bg;
+  // (opinionated rules)
+  color: $input-placeholder-color;
+  border-style: dashed;
+}
+
 
 /// Misc
 ///-----------------------------------------------------------------------------