From 2cbd43c3a0f0640776a4e7c7425b3210d2e6632b Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 6 Oct 2019 19:41:17 +0200
Subject: Make input label clickable again

---
 ISSUES.md                      |  4 ----
 client/src/Component/Input.hs  | 16 ++++++++++------
 client/src/Component/Select.hs | 16 +++++++++-------
 server/src/Design/Form.hs      | 13 ++++++-------
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/ISSUES.md b/ISSUES.md
index 9ee077d..f61d0b4 100644
--- a/ISSUES.md
+++ b/ISSUES.md
@@ -1,7 +1,3 @@
-# Fix
-
-- When clicking on an input label, focus to the input
-
 # Payment view
 
 - Remove unused payment category after payment edit on frontend
diff --git a/client/src/Component/Input.hs b/client/src/Component/Input.hs
index abdc51c..0c84754 100644
--- a/client/src/Component/Input.hs
+++ b/client/src/Component/Input.hs
@@ -75,13 +75,17 @@ input inputIn reset validate = do
 
     (textInput, resetClic) <- R.elDynAttr "div" containerAttr $ do
 
-      textInput <- R.textInput $ R.def
-        & R.attributes .~ inputAttr
-        & R.setValue .~ resetValue
-        & R.textInputConfig_initialValue .~ (_inputIn_initialValue inputIn)
-        & R.textInputConfig_inputType .~ (_inputIn_inputType inputIn)
+      textInput <- R.el "label" $ do
+        textInput <- R.textInput $ R.def
+          & R.attributes .~ inputAttr
+          & R.setValue .~ resetValue
+          & R.textInputConfig_initialValue .~ (_inputIn_initialValue inputIn)
+          & R.textInputConfig_inputType .~ (_inputIn_inputType inputIn)
 
-      R.el "label" $ R.text (_inputIn_label inputIn)
+        R.divClass "label" $
+          R.text (_inputIn_label inputIn)
+
+        return textInput
 
       resetClic <-
         if _inputIn_hasResetButton inputIn
diff --git a/client/src/Component/Select.hs b/client/src/Component/Select.hs
index 9a37afc..5980ed2 100644
--- a/client/src/Component/Select.hs
+++ b/client/src/Component/Select.hs
@@ -57,8 +57,6 @@ select selectIn = do
       ]
 
     value <- R.elDynAttr "div" containerAttr $ do
-      R.el "label" $ R.text (_selectIn_label selectIn)
-
       let initialValue = _selectIn_initialValue selectIn
 
       let setValue = R.leftmost
@@ -66,11 +64,15 @@ select selectIn = do
             , _selectIn_value selectIn
             ]
 
-      value <- R._dropdown_value <$>
-        R.dropdown
-          initialValue
-          (_selectIn_values selectIn)
-          (R.def { R._dropdownConfig_setValue = setValue })
+      value <- R.el "label" $ do
+        R.divClass "label" $
+          R.text (_selectIn_label selectIn)
+
+        R._dropdown_value <$>
+          R.dropdown
+            initialValue
+            (_selectIn_values selectIn)
+            (R.def { R._dropdownConfig_setValue = setValue })
 
       R.divClass "errorMessage" . R.dynText $
         R.ffor showedError (Maybe.fromMaybe "")
diff --git a/server/src/Design/Form.hs b/server/src/Design/Form.hs
index 0f236f7..506343d 100644
--- a/server/src/Design/Form.hs
+++ b/server/src/Design/Form.hs
@@ -15,10 +15,6 @@ design = do
   let inputTop = 22
   let inputPaddingBottom = 3
 
-  label ? do
-    cursor pointer
-    color Color.silver
-
   ".textInput" ? do
     position relative
     marginBottom (em 2)
@@ -40,7 +36,9 @@ design = do
         borderWidth (px 2)
         paddingBottom (px $ inputPaddingBottom - 1)
 
-    label ? do
+    ".label" ? do
+      zIndex (-1)
+      color Color.silver
       lineHeight (px inputHeight)
       position absolute
       top (px inputTop)
@@ -56,7 +54,7 @@ design = do
       hover & svg ? "path" ?
         ("fill" -: Color.toString (Color.silver -. 25))
 
-    (input # ".filled" |+ label) <> (input # focus |+ label) ? do
+    (input # ".filled" |+ ".label") <> (input # focus |+ ".label") ? do
       top (px 0)
       fontSize (pct 80)
 
@@ -81,7 +79,8 @@ design = do
   ".selectInput" ? do
     marginBottom (em 2)
 
-    label ? do
+    ".label" ? do
+      color Color.silver
       display block
       marginBottom (px 10)
       fontSize (pct 80)
-- 
cgit v1.2.3