1565 - Add typeahead dropdown icon/button

src/examples/src/config.tsx

@@ -2058,38 +2058,52 @@ export const config = {
 				{
 					filename: 'RemoteSource',
 					module: RemoteTypeahead,
-					title: 'Remote Source'
+					title: 'Remote Source',
+					sandbox: true,
+					size: 'large'
 				},
 				{
 					filename: 'Validation',
 					module: ValidatedTypeahead,
-					title: 'Validation'
+					title: 'Validation',
+					sandbox: true,
+					size: 'large'
 				},
 				{
 					filename: 'FreeText',
 					module: FreeTextTypeahead,
-					title: 'Free Text Typeahead'
+					title: 'Free Text Typeahead',
+					sandbox: true,
+					size: 'large'
 				},
 				{
 					filename: 'InitialValue',
 					module: InitialValueTypeahead,
-					title: 'Initial Value Typeahead'
+					title: 'Initial Value Typeahead',
+					sandbox: true,
+					size: 'large'
 				},
 				{
 					filename: 'Controlled',
 					module: ControlledTypeahead,
-					title: 'Controlled Typeahead'
+					title: 'Controlled Typeahead',
+					sandbox: true,
+					size: 'large'
 				},
 				{
 					filename: 'Disabled',
 					module: DisabledTypeahead,
-					title: 'Disabled Typeahead'
+					title: 'Disabled Typeahead',
+					sandbox: true,
+					size: 'large'
 				}
 			],
 			overview: {
 				example: {
 					filename: 'Basic',
-					module: BasicTypeahead
+					module: BasicTypeahead,
+					sandbox: true,
+					size: 'large'
 				}
 			}
 		},

src/examples/src/widgets/typeahead/Validation.tsx

@@ -27,6 +27,7 @@ export default factory(function Validation({ id, middleware: { icache, resource
 					icache.set('value', value);
 				}}
 				required
+				hasDownArrow
 			>
 				{{
 					label: 'Validation'

src/theme/default/typeahead.m.css

@@ -12,3 +12,13 @@
 }
 .menuWrapper {
 }
+/* Wrapper around the widgets arrow icon */
+.arrow {
+}
+
+.focused {
+}
+
+/* class added to the root when the menu is open */
+.expanded {
+}

src/theme/default/typeahead.m.css.d.ts

@@ -4,3 +4,6 @@ export const invalid: string;
 export const valid: string;
 export const trigger: string;
 export const menuWrapper: string;
+export const arrow: string;
+export const focused: string;
+export const expanded: string;

src/theme/dojo/text-input.m.css

@@ -16,7 +16,7 @@
 	margin: 0;
 	font-size: inherit;
 	height: calc(
-		var(--line-height-base) + 2 * var(--grid-base) + 2 * var(--border-width)
+		var(--line-height-base) + 2 * var(--grid-base) + 2 * var(--border-width) - 2
 	); /* for IE 11 */
 	line-height: var(--line-height-base);
 	padding: var(--grid-base);

src/theme/dojo/typeahead.m.css

@@ -5,3 +5,27 @@
 
 .triggerWrapper {
 }
+
+.arrow {
+	border: unset;
+	border-left: var(--border-width) solid var(--color-border);
+	bottom: var(--border-width);
+	color: var(--color-text-faded);
+	display: flex;
+	font-size: var(--font-size-icon);
+	line-height: var(--line-height-base);
+	padding: var(--spacing-regular);
+
+	cursor: pointer;
+	outline: none;
+
+	background: unset;
+
+	appearance: none;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	border-radius: 0;
+}
+
+.inputTrailing {
+}

src/theme/dojo/typeahead.m.css.d.ts

@@ -1,2 +1,4 @@
 export const root: string;
 export const triggerWrapper: string;
+export const arrow: string;
+export const inputTrailing: string;

src/theme/material/typeahead.m.css

@@ -2,3 +2,37 @@
 	display: flex;
 	flex-direction: column;
 }
+
+.arrow {
+	background: unset;
+	border: unset;
+
+	composes: mdc-select__dropdown-icon from '@material/select/dist/mdc.select.css';
+
+	pointer-events: auto;
+
+	cursor: pointer;
+	outline: none;
+
+	appearance: none;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+
+	padding: 0;
+}
+
+.expanded {
+	composes: mdc-select--activated from '@material/select/dist/mdc.select.css';
+}
+
+.iconDownIcon {
+	composes: downAltIcon from './icon.m.css';
+	color: var(--mdc-secondary-text-color);
+}
+
+.focused .iconDownIcon {
+	color: var(--mdc-theme-primary);
+}
+
+.inputTrailing {
+}

src/theme/material/typeahead.m.css.d.ts

@@ -1 +1,6 @@
 export const root: string;
+export const arrow: string;
+export const expanded: string;
+export const iconDownIcon: string;
+export const focused: string;
+export const inputTrailing: string;

src/typeahead/index.tsx

@@ -23,6 +23,8 @@ import { Keys } from '../common/util';
 import LoadingIndicator from '../loading-indicator';
 import * as inputCss from '../theme/default/text-input.m.css';
 import { find } from '@dojo/framework/shim/array';
+import Icon from '../icon';
+import * as iconCss from '../theme/default/icon.m.css';
 
 export interface TypeaheadProperties {
 	/** Callback called when user selects a value */
@@ -53,6 +55,8 @@ export interface TypeaheadProperties {
 	itemDisabled?: ListProperties['disabled'];
 	/** Flag to indicate if values other than those in the resource can be entered, defaults to true */
 	strict?: boolean;
+	/** Flag to indicate if drop down arrow should be shown in trailing section of text input, defaults to false */
+	hasDownArrow?: boolean;
 }
 
 export interface TypeaheadICache {
@@ -62,6 +66,7 @@ export interface TypeaheadICache {
 	activeIndex: number;
 	dirty: boolean;
 	expanded: boolean;
+	focused: boolean;
 	focusNode: string;
 	initial: string;
 	valid: boolean | undefined;
@@ -113,7 +118,8 @@ export const Typeahead = factory(function Typeahead({
 		},
 		classes,
 		theme: themeProp,
-		variant
+		variant,
+		hasDownArrow
 	} = properties();
 	const {
 		get,
@@ -289,6 +295,9 @@ export const Typeahead = factory(function Typeahead({
 		}
 	}
 
+	const expanded = icache.get('expanded');
+	const focused = icache.get('focused');
+
 	return (
 		<div
 			key="root"
@@ -297,7 +306,9 @@ export const Typeahead = factory(function Typeahead({
 				themedCss.root,
 				disabled && themedCss.disabled,
 				valid === true && themedCss.valid,
-				valid === false && themedCss.invalid
+				valid === false && themedCss.invalid,
+				expanded && themedCss.expanded,
+				focused && themedCss.focused
 			]}
 		>
 			<TriggerPopup
@@ -359,10 +370,12 @@ export const Typeahead = factory(function Typeahead({
 								)}
 								onFocus={() => {
 									const { onFocus } = properties();
+									icache.set('focused', true);
 									onFocus && onFocus();
 								}}
 								onBlur={() => {
 									const { onBlur } = properties();
+									icache.set('focused', false);
 									if (!strict) {
 										const value = icache.getOrSet('labelValue', '');
 										const currentOption = icache.get('selectedOption');
@@ -419,7 +432,39 @@ export const Typeahead = factory(function Typeahead({
 								}}
 								valid={valid}
 							>
-								{{ label, leading }}
+								{{
+									label,
+									leading,
+									trailing: hasDownArrow && (
+										<button
+											type="button"
+											disabled={disabled}
+											classes={themedCss.arrow}
+											onclick={openMenu}
+											onkeydown={(event) => {
+												if (
+													event.which === Keys.Down ||
+													event.which === Keys.Space ||
+													event.which === Keys.Enter
+												) {
+													event.preventDefault();
+													openMenu();
+												}
+											}}
+										>
+											<Icon
+												type="downIcon"
+												theme={theme.compose(
+													iconCss,
+													css,
+													'icon'
+												)}
+												classes={classes}
+												variant={variant}
+											/>
+										</button>
+									)
+								}}
 							</TextInput>
 						);
 					},