From 79255fa656e94a91d414a32d7161fc81414fe3bd Mon Sep 17 00:00:00 2001
From: bitpshr <mail@bitpshr.net>
Date: Mon, 3 May 2021 12:48:10 -0400
Subject: [PATCH 1/3] fix: chip typeahead value placement

---
 src/text-input/index.tsx                | 11 ++++++++++-
 src/theme/dojo/chip-typeahead.m.css     |  2 --
 src/theme/material/chip-typeahead.m.css |  2 --
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/text-input/index.tsx b/src/text-input/index.tsx
index fde3099d16..396443a605 100644
--- a/src/text-input/index.tsx
+++ b/src/text-input/index.tsx
@@ -8,6 +8,7 @@ import { formatAriaProperties } from '../common/util';
 import HelperText from '../helper-text/index';
 import Label from '../label/index';
 import * as css from '../theme/default/text-input.m.css';
+import { isArray } from 'util';
 
 export type TextInputType =
 	| 'text'
@@ -226,6 +227,11 @@ export const TextInput = factory(function TextInput({
 	const inputFocused = focus.isFocused('input');
 	const autofilled = Boolean(icache.get('autofilled'));
 
+	let leadingElements;
+	if (leading) {
+		leadingElements = isArray(leading) ? leading : [leading];
+	}
+
 	return (
 		<div key="root" classes={[theme.variant(), themeCss.root]} role="presentation">
 			<div
@@ -269,7 +275,10 @@ export const TextInput = factory(function TextInput({
 					]}
 					role="presentation"
 				>
-					{leading && <span classes={themeCss.leading}>{leading}</span>}
+					{leadingElements &&
+						leadingElements.map((leadingElement) => (
+							<span classes={themeCss.leading}>{leadingElement}</span>
+						))}
 					<input
 						{...formatAriaProperties(aria)}
 						aria-invalid={valid === false ? 'true' : undefined}
diff --git a/src/theme/dojo/chip-typeahead.m.css b/src/theme/dojo/chip-typeahead.m.css
index 918482e4b6..f88959b18b 100644
--- a/src/theme/dojo/chip-typeahead.m.css
+++ b/src/theme/dojo/chip-typeahead.m.css
@@ -17,11 +17,9 @@
 }
 
 .root .inputLeading {
-	display: block;
 	pointer-events: unset;
 	position: static;
 	transform: none;
-	max-width: 100%;
 }
 
 .root .inputWrapper {
diff --git a/src/theme/material/chip-typeahead.m.css b/src/theme/material/chip-typeahead.m.css
index 9034d31765..aed6c07c0f 100644
--- a/src/theme/material/chip-typeahead.m.css
+++ b/src/theme/material/chip-typeahead.m.css
@@ -41,11 +41,9 @@
 }
 
 .root .inputLeading {
-	display: block;
 	pointer-events: unset;
 	position: static;
 	transform: none;
-	max-width: 100%;
 }
 
 .values .value {

From 72453878014c845169b00ffc7394372faf4b5352 Mon Sep 17 00:00:00 2001
From: bitpshr <mail@bitpshr.net>
Date: Mon, 3 May 2021 13:55:57 -0400
Subject: [PATCH 2/3] fix: use virtual to wrap chips

---
 src/text-input/index.tsx                     | 11 +++++++----
 src/text-input/tests/unit/TextInput.spec.tsx |  6 +++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/text-input/index.tsx b/src/text-input/index.tsx
index 396443a605..a4f4e07f5d 100644
--- a/src/text-input/index.tsx
+++ b/src/text-input/index.tsx
@@ -275,10 +275,13 @@ export const TextInput = factory(function TextInput({
 					]}
 					role="presentation"
 				>
-					{leadingElements &&
-						leadingElements.map((leadingElement) => (
-							<span classes={themeCss.leading}>{leadingElement}</span>
-						))}
+					{leadingElements && (
+						<virtual>
+							{leadingElements.map((leadingElement) => (
+								<span classes={themeCss.leading}>{leadingElement}</span>
+							))}
+						</virtual>
+					)}
 					<input
 						{...formatAriaProperties(aria)}
 						aria-invalid={valid === false ? 'true' : undefined}
diff --git a/src/text-input/tests/unit/TextInput.spec.tsx b/src/text-input/tests/unit/TextInput.spec.tsx
index 76dc585bc9..dfc2185e79 100644
--- a/src/text-input/tests/unit/TextInput.spec.tsx
+++ b/src/text-input/tests/unit/TextInput.spec.tsx
@@ -591,7 +591,11 @@ registerSuite('TextInput', {
 		},
 
 		'leading property'() {
-			const leading = <span classes={css.leading}>A</span>;
+			const leading = (
+				<virtual>
+					<span classes={css.leading}>A</span>
+				</virtual>
+			);
 			const leadingTemplate = baseAssertion
 				.setProperty('@wrapper', 'classes', [
 					css.wrapper,

From ef0788c4cfd06354c601ab737e87badd678b1c6a Mon Sep 17 00:00:00 2001
From: bitpshr <mail@bitpshr.net>
Date: Tue, 18 May 2021 11:13:29 -0400
Subject: [PATCH 3/3] feedback: Array.isArray

---
 src/text-input/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/text-input/index.tsx b/src/text-input/index.tsx
index a4f4e07f5d..2a9f955165 100644
--- a/src/text-input/index.tsx
+++ b/src/text-input/index.tsx
@@ -8,7 +8,6 @@ import { formatAriaProperties } from '../common/util';
 import HelperText from '../helper-text/index';
 import Label from '../label/index';
 import * as css from '../theme/default/text-input.m.css';
-import { isArray } from 'util';
 
 export type TextInputType =
 	| 'text'
@@ -229,7 +228,7 @@ export const TextInput = factory(function TextInput({
 
 	let leadingElements;
 	if (leading) {
-		leadingElements = isArray(leading) ? leading : [leading];
+		leadingElements = Array.isArray(leading) ? leading : [leading];
 	}
 
 	return (