Update open choice behavior and appearance to reflect posthog-js

PostHog · Nov 21, 2023 · 7f40827 · 7f40827
1 parent 82f080f
commit 7f40827
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss
@@ -246,6 +246,10 @@
 
 .multiple-choice-options .choice-option-open label {
     padding-right: 30px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    max-width: 100%;
 }
 
 .multiple-choice-options .choice-option-open input:disabled + label {
@@ -255,12 +259,14 @@
 .multiple-choice-options .choice-option-open label input {
     position: relative;
     opacity: 1;
-    outline: 1px solid rgba(0, 0, 0, 0.25);
-    border-radius: 4px;
+    border: 1.5px solid rgba(0, 0, 0, 0.25);
+    border-radius: 2px;
+    outline: 0;
+    flex-grow: 1;
 }
 
 .multiple-choice-options .choice-option-open label input:focus {
-    outline-color: black;
+    border-color: rgba(0, 0, 0);
 }
 
 .thank-you-message {

diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -530,11 +530,13 @@ const OpenEndedChoice = ({
     label,
     initialChecked,
     inputType,
+    key,
 }: {
     label: string
     initialChecked: boolean
     inputType: string
     textColor: string
+    key: number
 }): JSX.Element => {
     const textRef = useRef<HTMLInputElement | null>(null)
     const checkRef = useRef<HTMLInputElement | null>(null)
@@ -543,23 +545,23 @@ const OpenEndedChoice = ({
         <div
             className="choice-option choice-option-open"
             onClick={() => {
-                if (checkRef.current && checkRef.current.checked) {
+                if (checkRef.current?.checked || checkRef.current?.disabled) {
                     textRef.current?.focus()
                 }
             }}
         >
             <input
+                id={`${label}-${key}`}
                 ref={checkRef}
                 type={inputType}
                 disabled={!initialChecked || !checkRef.current?.value}
                 defaultChecked={initialChecked}
                 name="choice"
             />
-            <label className="flex flex-wrap gap-2 max-w-full">
+            <label htmlFor={`${label}-${key}`}>
                 <span>{label}:</span>
                 <input
                     ref={textRef}
-                    className="grow"
                     type="text"
                     maxLength={100}
                     onClick={(e) => e.stopPropagation()}