Make select properly controlled

This commit is contained in:
Mark Eibes 2023-04-25 09:03:58 +02:00
parent 2015e4ab6c
commit 475dbc6b37
2 changed files with 8 additions and 1 deletions

6
.idea/tailwindcss.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="TailwindSettings">
<option name="lspConfiguration" value="{&#10; &quot;includeLanguages&quot;: {&#10; &quot;purescript&quot;: &quot;html&quot;&#10; },&#10; &quot;[purescript]&quot;: {&#10; &quot;tailwindCSS.experimental.classRegex&quot;: [&#10; &quot;\\bclassName:\\s+\&quot;([^\&quot;]*)\&quot;&quot;&#10; ]&#10; },&#10; &quot;files&quot;: {&#10; &quot;exclude&quot;: [&#10; &quot;**/.git/**&quot;,&#10; &quot;**/node_modules/**&quot;,&#10; &quot;**/.hg/**&quot;,&#10; &quot;**/.svn/**&quot;&#10; ]&#10; },&#10; &quot;emmetCompletions&quot;: false,&#10; &quot;classAttributes&quot;: [&quot;class&quot;, &quot;className&quot;, &quot;ngClass&quot;],&#10; &quot;colorDecorators&quot;: false,&#10; &quot;showPixelEquivalents&quot;: true,&#10; &quot;rootFontSize&quot;: 16,&#10; &quot;hovers&quot;: true,&#10; &quot;suggestions&quot;: true,&#10; &quot;codeActions&quot;: true,&#10; &quot;validate&quot;: true,&#10; &quot;lint&quot;: {&#10; &quot;invalidScreen&quot;: &quot;error&quot;,&#10; &quot;invalidVariant&quot;: &quot;error&quot;,&#10; &quot;invalidTailwindDirective&quot;: &quot;error&quot;,&#10; &quot;invalidApply&quot;: &quot;error&quot;,&#10; &quot;invalidConfigPath&quot;: &quot;error&quot;,&#10; &quot;cssConflict&quot;: &quot;warning&quot;,&#10; &quot;recommendedVariantOrder&quot;: &quot;warning&quot;&#10; },&#10; &quot;experimental&quot;: {&#10; &quot;configFile&quot;: null,&#10; &quot;classRegex&quot;: []&#10; }&#10;}" />
</component>
</project>

View File

@ -18,7 +18,7 @@ type Props a =
component ∷ ∀ a. ReactComponent (Props a)
component = unsafePerformEffect do
React.reactComponent "Select" \{ toString, toValue, choices, onChange } →
React.reactComponent "Select" \{ toString, toValue, choice, choices, onChange } →
React.do
pure $
div "input-container" Style.container
@ -27,6 +27,7 @@ component = unsafePerformEffect do
{ className: "select"
, role: "listbox"
, css: Style.select
, value: toValue choice
, onChange: handler targetValue
\maybeVal → traverse_ onChange do
val ← maybeVal