From 58c7551af322bb3a1b3410cfeef12fe30a03b86e Mon Sep 17 00:00:00 2001
From: Arthur Xavier <arthur.xavierx@gmail.com>
Date: Fri, 24 Jun 2022 15:46:03 -0300
Subject: [PATCH 1/2] Expand MultiInput inner input field to fill the whole
 container

Currently the MultiInput component has an inner auto-sized input field
whose initial width corresponds to that of the placeholder text. This
makes is difficult for users to interact with the component, because in
order to start typing in, they must necessarily click on the placeholder
text, as clicking on anywhere else in the container wouldn't hit the
inner input field.
---
 src/Components/MultiInput/Component.purs | 58 +++++++++++++++---------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/Components/MultiInput/Component.purs b/src/Components/MultiInput/Component.purs
index 5b4f55c4..f18c8d7b 100644
--- a/src/Components/MultiInput/Component.purs
+++ b/src/Components/MultiInput/Component.purs
@@ -571,7 +571,8 @@ render ::
 render state =
   Halogen.HTML.div
     [ Halogen.HTML.Properties.classes containerClasses  ]
-    [ Halogen.HTML.div_
+    [ Halogen.HTML.div
+        [ Ocelot.HTML.Properties.css "flex flex-wrap items-start" ]
         (Data.FunctorWithIndex.mapWithIndex (renderItem state.placeholder) state.items)
     , renderTextWidth
     ]
@@ -585,7 +586,7 @@ renderItem ::
 renderItem placeholder index = case _ of
   Display { text } -> renderItemDisplay index text
   Edit { inputBox } -> renderItemEdit placeholder index inputBox
-  New { inputBox } -> renderAutoSizeInput placeholder index true inputBox
+  New { inputBox } -> renderItemNew placeholder index inputBox
 
 renderItemDisplay ::
   forall m.
@@ -622,6 +623,17 @@ renderItemEdit placeholder index inputBox =
         [ Ocelot.Block.Icon.delete_ ]
     ]
 
+renderItemNew ::
+  forall m.
+  Placeholder ->
+  Int ->
+  InputBox ->
+  ComponentHTML m
+renderItemNew placeholder index inputBox =
+  Halogen.HTML.div
+    [ Ocelot.HTML.Properties.css "block flex-1" ]
+    [ renderAutoSizeInput placeholder index true inputBox ]
+
 renderAutoSizeInput ::
   forall m.
   Placeholder ->
@@ -630,29 +642,30 @@ renderAutoSizeInput ::
   InputBox ->
   ComponentHTML m
 renderAutoSizeInput placeholder index new inputBox =
-  Halogen.HTML.div
-    [ Ocelot.HTML.Properties.css "inline-block" ]
-    [ Halogen.HTML.input
-        [ Halogen.HTML.Properties.attr (Halogen.HTML.AttrName "style") css
-        , Halogen.HTML.Properties.classes inputClasses
-        , Halogen.HTML.Events.onBlur \_ -> OnBlur index
-        , Halogen.HTML.Events.onFocus \_ -> OnFocus index
-        , Halogen.HTML.Events.onKeyDown (OnKeyDown index)
-        , Halogen.HTML.Events.onMouseDown (OnMouseDown index)
-        , Halogen.HTML.Events.onValueInput (OnInput index)
-        , Halogen.HTML.Properties.placeholder case new of
-            false -> ""
-            true
-              | index == 0 -> placeholder.primary.text
-              | otherwise -> placeholder.secondary.text
-        , Halogen.HTML.Properties.ref (inputRef index)
-        , Halogen.HTML.Properties.type_ Halogen.HTML.Properties.InputText
-        , Halogen.HTML.Properties.value inputBox.text
-        ]
+  Halogen.HTML.input
+    [ Halogen.HTML.Properties.attr (Halogen.HTML.AttrName "style") css
+    , Halogen.HTML.Properties.classes inputClasses
+    , Halogen.HTML.Events.onBlur \_ -> OnBlur index
+    , Halogen.HTML.Events.onFocus \_ -> OnFocus index
+    , Halogen.HTML.Events.onKeyDown (OnKeyDown index)
+    , Halogen.HTML.Events.onMouseDown (OnMouseDown index)
+    , Halogen.HTML.Events.onValueInput (OnInput index)
+    , Halogen.HTML.Properties.placeholder case new of
+        false -> ""
+        true
+          | index == 0 -> placeholder.primary.text
+          | otherwise -> placeholder.secondary.text
+    , Halogen.HTML.Properties.ref (inputRef index)
+    , Halogen.HTML.Properties.type_ Halogen.HTML.Properties.InputText
+    , Halogen.HTML.Properties.value inputBox.text
     ]
   where
   css :: String
-  css = "width: " <> show width <> "px"
+  css =
+    if new then
+      "min-width: " <> show width <> "px"
+    else
+      "width: " <> show width <> "px"
 
   width :: Number
   width
@@ -713,6 +726,7 @@ inputClasses =
   [ "my-1"
   , "outline-none"
   , "px-1"
+  , "w-full"
   ]
     <#> Halogen.ClassName
 

From 54c4bda9dc5d060017f47913a155a85f7c2d823b Mon Sep 17 00:00:00 2001
From: Arthur Xavier <arthur.xavierx@gmail.com>
Date: Mon, 27 Jun 2022 10:41:45 -0300
Subject: [PATCH 2/2] Bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c1a5cbe5..3f083db3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "purescript-ocelot",
-  "version": "0.33.2",
+  "version": "0.33.3",
   "private": true,
   "scripts": {
     "build-all": "make build",