From 8c8a46c4f6eaf324f61cd90d4292c6e11c257866 Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Sat, 27 Mar 2021 12:55:22 -0700
Subject: [PATCH] Add `autocapitalization` and `inputmode` settings to some
 `input` elements

---
 .../components/ingredient-picker.blade.php    |  4 ++-
 .../views/components/search-view.blade.php    | 10 +++---
 resources/views/components/tagger.blade.php   | 17 ++++-----
 resources/views/foods/edit.blade.php          | 35 +++++++++----------
 resources/views/goals/edit.blade.php          |  2 +-
 .../create-from-nutrients.blade.php           |  5 ++-
 resources/views/recipes/edit.blade.php        |  1 +
 .../partials/ingredient-input.blade.php       |  1 +
 8 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/resources/views/components/ingredient-picker.blade.php b/resources/views/components/ingredient-picker.blade.php
index 71988b2..92cb9c4 100644
--- a/resources/views/components/ingredient-picker.blade.php
+++ b/resources/views/components/ingredient-picker.blade.php
@@ -11,10 +11,12 @@
                             x-ref="ingredients_type"/>
             <x-inputs.input type="text"
                             name="ingredients[name][]"
+                            class="w-full"
                             value="{{ $defaultName ?? '' }}"
                             placeholder="Search..."
                             autocomplete="off"
-                            class="w-full"
+                            autocapitalize="none"
+                            inputmode="search"
                             x-ref="ingredients_name"
                             x-spread="search" />
         </div>
diff --git a/resources/views/components/search-view.blade.php b/resources/views/components/search-view.blade.php
index 985ce9d..5c4befe 100644
--- a/resources/views/components/search-view.blade.php
+++ b/resources/views/components/search-view.blade.php
@@ -1,11 +1,13 @@
 <div x-data="searchView()" x-init="loadMore()">
     <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <nav class="md:w-1/4">
-            <x-inputs.input type="text"
-                            name="search"
-                            placeholder="Search..."
-                            autocomplete="off"
+            <x-inputs.input name="search"
+                            type="text"
                             class="w-full mb-4"
+                            autocomplete="off"
+                            autocapitalize="none"
+                            inputmode="search"
+                            placeholder="Search..."
                             @input.debounce.400ms="search($event)" />
             <details open>
                 <summary>Filters</summary>
diff --git a/resources/views/components/tagger.blade.php b/resources/views/components/tagger.blade.php
index 0d49687..e6f139e 100644
--- a/resources/views/components/tagger.blade.php
+++ b/resources/views/components/tagger.blade.php
@@ -7,14 +7,15 @@
                             x-model="tags"/>
             <x-inputs.label for="tag_picker" value="Tags"/>
             <div class="flex flex-row items-center">
-                <x-inputs.input
-                    type="text"
-                    name="tag_picker"
-                    class="mr-2"
-                    x-model="searchTerm"
-                    x-ref="searchTerm"
-                    @input="search($event.target.value)"
-                    placeholder="Enter some tags..." />
+                <x-inputs.input name="tag_picker"
+                                type="text"
+                                class="mr-2"
+                                autocapitalize="none"
+                                inputmode="search"
+                                placeholder="Enter some tags..."
+                                x-model="searchTerm"
+                                x-ref="searchTerm"
+                                @input="search($event.target.value)" />
                 <div x-show="open">
                     <div class="absolute z-40 left-0 mt-2">
                         <div class="py-1 text-sm bg-white rounded shadow-lg border border-gray-300">
diff --git a/resources/views/foods/edit.blade.php b/resources/views/foods/edit.blade.php
index faf1aa1..b9e5ef5 100644
--- a/resources/views/foods/edit.blade.php
+++ b/resources/views/foods/edit.blade.php
@@ -13,10 +13,10 @@
                                 <div class="flex-auto">
                                     <x-inputs.label for="name" value="Name"/>
 
-                                    <x-inputs.input id="name"
-                                                    class="block mt-1 w-full"
+                                    <x-inputs.input name="name"
                                                     type="text"
-                                                    name="name"
+                                                    class="block mt-1 w-full"
+                                                    autocapitalize="none"
                                                     :value="old('name', $food->name)"
                                                     required/>
                                 </div>
@@ -25,10 +25,10 @@
                                 <div class="flex-auto">
                                     <x-inputs.label for="detail" value="Detail"/>
 
-                                    <x-inputs.input id="detail"
-                                                    class="block mt-1 w-full"
+                                    <x-inputs.input name="detail"
                                                     type="text"
-                                                    name="detail"
+                                                    class="block mt-1 w-full"
+                                                    autocapitalize="none"
                                                     :value="old('detail', $food->detail)"/>
                                 </div>
 
@@ -36,10 +36,9 @@
                                 <div class="flex-auto">
                                     <x-inputs.label for="brand" value="Brand"/>
 
-                                    <x-inputs.input id="brand"
-                                                    class="block mt-1 w-full"
+                                    <x-inputs.input name="brand"
                                                     type="text"
-                                                    name="brand"
+                                                    class="block mt-1 w-full"
                                                     :value="old('brand', $food->brand)"/>
                                 </div>
                             </div>
@@ -49,10 +48,9 @@
                                 <div>
                                     <x-inputs.label for="serving_size" value="Serving size"/>
 
-                                    <x-inputs.input id="serving_size"
-                                                    class="block mt-1 w-full"
+                                    <x-inputs.input name="serving_size"
                                                     type="text"
-                                                    name="serving_size"
+                                                    class="block mt-1 w-full"
                                                     size="10"
                                                     :value="old('serving_size', $food->serving_size_formatted)"
                                                     required/>
@@ -75,9 +73,10 @@
                                     <x-inputs.label for="serving_unit_name" value="Serving unit name"/>
 
                                     <x-inputs.input name="serving_unit_name"
-                                                    placeholder="e.g. clove, egg"
-                                                    class="block mt-1 w-full"
                                                     type="text"
+                                                    autocapitalize="none"
+                                                    class="block mt-1 w-full"
+                                                    placeholder="e.g. clove, egg"
                                                     size="10"
                                                     :value="old('serving_unit_name', $food->serving_unit_name)"/>
                                 </div>
@@ -86,11 +85,10 @@
                                 <div>
                                     <x-inputs.label for="serving_weight" value="Serving weight (g)"/>
 
-                                    <x-inputs.input id="serving_weight"
-                                                    class="block mt-1 w-full"
+                                    <x-inputs.input name="serving_weight"
                                                     type="number"
                                                     step="any"
-                                                    name="serving_weight"
+                                                    class="block mt-1 w-full"
                                                     size="10"
                                                     :value="old('serving_weight', $food->serving_weight)"
                                                     required/>
@@ -106,8 +104,8 @@
 
                                             <x-inputs.input name="{{ $nutrient['value'] }}"
                                                             type="number"
-                                                            class="block w-full mt-1 md:w-5/6"
                                                             step="any"
+                                                            class="block w-full mt-1 md:w-5/6"
                                                             :value="old($nutrient['value'], $food->{$nutrient['value']})"/>
                                         </div>
                                 @endforeach
@@ -123,6 +121,7 @@
                                 <x-inputs.input name="source"
                                                 type="text"
                                                 class="block mt-1 w-full"
+                                                inputmode="url"
                                                 :value="old('source', $food->source)" />
                             </div>
 
diff --git a/resources/views/goals/edit.blade.php b/resources/views/goals/edit.blade.php
index 8ba1ab4..9303d8b 100644
--- a/resources/views/goals/edit.blade.php
+++ b/resources/views/goals/edit.blade.php
@@ -37,7 +37,7 @@
                     </x-inputs.select>
                 </div>
 
-                <!-- Name -->
+                <!-- Trackable -->
                 <div class="flex-auto">
                     <x-inputs.label for="name" value="Trackable" />
                     <x-inputs.select name="name"
diff --git a/resources/views/journal-entries/create-from-nutrients.blade.php b/resources/views/journal-entries/create-from-nutrients.blade.php
index f32af89..bc64301 100644
--- a/resources/views/journal-entries/create-from-nutrients.blade.php
+++ b/resources/views/journal-entries/create-from-nutrients.blade.php
@@ -54,11 +54,10 @@
                     <x-inputs.label for="{{ $nutrient['value'] }}"
                                     :value="ucfirst($nutrient['value']) . ($nutrient['unit'] ? ' (' . $nutrient['unit'] . ')' : '')"/>
 
-                    <x-inputs.input id="{{ $nutrient['value'] }}"
-                                    class="block w-full"
+                    <x-inputs.input name="{{ $nutrient['value'] }}"
                                     type="number"
                                     step="any"
-                                    name="{{ $nutrient['value'] }}"
+                                    class="block w-full"
                                     :value="old($nutrient['value'])"/>
                 </div>
             @endforeach
diff --git a/resources/views/recipes/edit.blade.php b/resources/views/recipes/edit.blade.php
index a2e5a01..f11888e 100644
--- a/resources/views/recipes/edit.blade.php
+++ b/resources/views/recipes/edit.blade.php
@@ -116,6 +116,7 @@
                 <x-inputs.input name="source"
                                 type="text"
                                 class="block mt-1 w-full"
+                                inputmode="url"
                                 :value="old('source', $recipe->source)" />
             </div>
 
diff --git a/resources/views/recipes/partials/ingredient-input.blade.php b/resources/views/recipes/partials/ingredient-input.blade.php
index 999beba..8b99c50 100644
--- a/resources/views/recipes/partials/ingredient-input.blade.php
+++ b/resources/views/recipes/partials/ingredient-input.blade.php
@@ -28,6 +28,7 @@
             <x-inputs.input name="ingredients[detail][]"
                             type="text"
                             class="block"
+                            autocapitalize="none"
                             placeholder="Detail (diced, chopped, etc.)"
                             :value="$detail ?? null" />
         </div>