From 9385dc3813be01fbc05df9321437805eaaaf8f10 Mon Sep 17 00:00:00 2001
From: Katie Toler <katie.toler@temporal.io>
Date: Tue, 15 Oct 2024 16:50:04 -0600
Subject: [PATCH 1/6] Make outer input div also selectable and reactive

---
 src/lib/holocene/input/input.svelte | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/lib/holocene/input/input.svelte b/src/lib/holocene/input/input.svelte
index 7a74e9928..a6caeabd4 100644
--- a/src/lib/holocene/input/input.svelte
+++ b/src/lib/holocene/input/input.svelte
@@ -74,8 +74,10 @@
 
   let testId = $$props['data-testid'] || id;
 
-  function callFocus(input: HTMLInputElement) {
-    if (autoFocus && input) input.focus();
+  let inputRef: HTMLInputElement | null = null;
+
+  function handleFocus() {
+    inputRef?.focus();
   }
 
   const dispatch = createEventDispatcher();
@@ -93,25 +95,28 @@
   <div class="input-group flex rounded-lg">
     <slot name="before-input" {disabled} />
     <div
+      role="button"
       class="input-container"
       class:disabled
       class:error
       class:noBorder
-      class:unroundLeft={unroundLeft || $$slots['before-input']}
-      class:unroundRight={unroundRight || $$slots['after-input']}
+      class:unroundLeft
+      class:unroundRight
       class:invalid={!valid}
+      tabindex={disabled ? undefined : 0}
+      on:focus={handleFocus}
     >
       {#if icon}
         <span class="icon-container">
           <Icon name={icon} />
         </span>
       {/if}
+
       <input
+        bind:this={inputRef}
         class="input"
         class:disabled
         {disabled}
-        data-lpignore="true"
-        data-1p-ignore="true"
         maxlength={maxLength > 0 ? maxLength : undefined}
         {placeholder}
         {id}
@@ -120,16 +125,10 @@
         {required}
         {autocomplete}
         bind:value
-        on:click|stopPropagation
-        on:input
-        on:keydown|stopPropagation
-        on:change
-        on:focus
-        on:blur
-        use:callFocus
         data-testid={testId}
         {...$$restProps}
       />
+
       {#if copyable}
         <div class="copy-icon-container">
           <button aria-label={copyButtonLabel} on:click={(e) => copy(e, value)}>
@@ -185,7 +184,7 @@
 <style lang="postcss">
   /* Base styles */
   .input-container {
-    @apply surface-primary relative box-border inline-flex h-10 w-full items-center rounded-lg border-2 border-subtle text-sm focus-within:outline-none focus-within:ring-4 focus-within:ring-primary/70;
+    @apply surface-primary relative box-border inline-flex h-10 w-full cursor-text items-center rounded-lg border-2 border-subtle text-sm focus-within:outline-none focus-within:ring-4 focus-within:ring-primary/70;
 
     &.error,
     &.invalid {

From 593f8c98e1d624f1a2c3d209044c65344650b6d5 Mon Sep 17 00:00:00 2001
From: Katie Toler <katie.toler@temporal.io>
Date: Tue, 15 Oct 2024 17:08:40 -0600
Subject: [PATCH 2/6] Add back info to input and div

---
 src/lib/holocene/input/input.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/holocene/input/input.svelte b/src/lib/holocene/input/input.svelte
index a6caeabd4..691c02585 100644
--- a/src/lib/holocene/input/input.svelte
+++ b/src/lib/holocene/input/input.svelte
@@ -100,8 +100,8 @@
       class:disabled
       class:error
       class:noBorder
-      class:unroundLeft
-      class:unroundRight
+      class:unroundLeft={unroundLeft || $$slots['before-input']}
+      class:unroundRight={unroundRight || $$slots['after-input']}
       class:invalid={!valid}
       tabindex={disabled ? undefined : 0}
       on:focus={handleFocus}
@@ -124,7 +124,15 @@
         {spellcheck}
         {required}
         {autocomplete}
+        data-lpignore="true"
+        data-1p-ignore="true"
         bind:value
+        on:click|stopPropagation
+        on:input
+        on:keydown|stopPropagation
+        on:change
+        on:focus
+        on:blur
         data-testid={testId}
         {...$$restProps}
       />

From 57aaa3c3803dcd135c491ee0d855afc1110861c8 Mon Sep 17 00:00:00 2001
From: Katie Toler <katie.toler@temporal.io>
Date: Wed, 16 Oct 2024 11:24:01 -0600
Subject: [PATCH 3/6] Make code block input selectable and move styles so that
 outer div isn't visible but is reactive

---
 src/lib/holocene/code-block.svelte | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index e9f39a917..2dc7a1f9c 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -69,7 +69,7 @@
     copy(e, content);
   };
 
-  let editor: HTMLElement;
+  let editor: HTMLDivElement | null = null;
   let view: EditorView;
 
   const formatJSON = (jsonData: string): string => {
@@ -174,19 +174,31 @@
     }
   };
 
+  $: disabled = disabled || copyable;
+  function handleFocus() {
+    if (editor) {
+      editor.focus();
+    }
+  }
   $: content, language, setView();
 </script>
 
-<div class="relative min-w-[80px] grow">
+<div role="button" class="relative" tabindex={0} on:focus={handleFocus}>
   <div
     bind:this={editor}
-    class={className}
+    role="textbox"
+    class={`inline min-w-[80px] cursor-text rounded-xl ${className} ${
+      editable ? 'editable' : 'readOnly'
+    }`}
     class:inline
+    contenteditable={editable}
     data-testid={$$props.testId}
     class:editable
+    tabindex={-1}
     class:readOnly={!editable}
     {...$$restProps}
   />
+
   {#if copyable}
     <CopyButton
       {copyIconTitle}

From efc598213351b8d80b94ae648e51b1f39949a1a0 Mon Sep 17 00:00:00 2001
From: Katie Toler <katie.toler@temporal.io>
Date: Wed, 16 Oct 2024 12:37:17 -0600
Subject: [PATCH 4/6] Revert changes

---
 src/lib/holocene/code-block.svelte        | 2 +-
 src/lib/holocene/combobox/combobox.svelte | 1 -
 src/lib/holocene/input/input.svelte       | 4 +++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index 2dc7a1f9c..4c968737d 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -187,7 +187,7 @@
   <div
     bind:this={editor}
     role="textbox"
-    class={`inline min-w-[80px] cursor-text rounded-xl ${className} ${
+    class={`inline min-w-[80px] cursor-text rounded-xl outline-none ${className} ${
       editable ? 'editable' : 'readOnly'
     }`}
     class:inline
diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte
index 57bd02d38..279797142 100644
--- a/src/lib/holocene/combobox/combobox.svelte
+++ b/src/lib/holocene/combobox/combobox.svelte
@@ -90,7 +90,6 @@
   export let label: string;
   export let multiselect = false;
   export let value: string | string[] = multiselect ? [] : undefined;
-  export let toggleLabel: string;
   export let noResultsText: string;
   export let disabled = false;
   export let labelHidden = false;
diff --git a/src/lib/holocene/input/input.svelte b/src/lib/holocene/input/input.svelte
index 691c02585..95076864d 100644
--- a/src/lib/holocene/input/input.svelte
+++ b/src/lib/holocene/input/input.svelte
@@ -77,7 +77,9 @@
   let inputRef: HTMLInputElement | null = null;
 
   function handleFocus() {
-    inputRef?.focus();
+    if (autoFocus && !disabled) {
+      inputRef?.focus();
+    }
   }
 
   const dispatch = createEventDispatcher();

From 0137e9f2588a7d211834d78395082dbdad233c38 Mon Sep 17 00:00:00 2001
From: Katie Toler <katie.toler@temporal.io>
Date: Thu, 17 Oct 2024 12:29:46 -0600
Subject: [PATCH 5/6] Make outline less weird

---
 src/lib/holocene/code-block.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index 4c968737d..34b662157 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -187,7 +187,7 @@
   <div
     bind:this={editor}
     role="textbox"
-    class={`inline min-w-[80px] cursor-text rounded-xl outline-none ${className} ${
+    class={`rounded-x inline min-w-[80px] cursor-text ${className} ${
       editable ? 'editable' : 'readOnly'
     }`}
     class:inline

From f325e8f8974800c27cfcdfd7c3c69d01d523495b Mon Sep 17 00:00:00 2001
From: Katie Toler <katie.toler@temporal.io>
Date: Thu, 17 Oct 2024 15:04:59 -0600
Subject: [PATCH 6/6] Test

---
 src/lib/holocene/code-block.svelte  | 3 +--
 src/lib/holocene/input/input.svelte | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index 34b662157..3a913ef5d 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -183,10 +183,9 @@
   $: content, language, setView();
 </script>
 
-<div role="button" class="relative" tabindex={0} on:focus={handleFocus}>
+<div class="relative" tabindex={0} on:focus={handleFocus}>
   <div
     bind:this={editor}
-    role="textbox"
     class={`rounded-x inline min-w-[80px] cursor-text ${className} ${
       editable ? 'editable' : 'readOnly'
     }`}
diff --git a/src/lib/holocene/input/input.svelte b/src/lib/holocene/input/input.svelte
index 95076864d..535dfa990 100644
--- a/src/lib/holocene/input/input.svelte
+++ b/src/lib/holocene/input/input.svelte
@@ -97,7 +97,6 @@
   <div class="input-group flex rounded-lg">
     <slot name="before-input" {disabled} />
     <div
-      role="button"
       class="input-container"
       class:disabled
       class:error