From 7d28542fe50703b418f306152bb1043f4566a1d1 Mon Sep 17 00:00:00 2001
From: Graham Johnson <graham@commonwealth.im>
Date: Tue, 1 Nov 2022 14:18:50 -0400
Subject: [PATCH 1/4] Make CW Dropdown searchable

---
 .../components/component_kit/cw_dropdown.tsx  | 101 ++++++++++++++----
 .../views/components/component_kit/types.ts   |  47 ++++----
 .../components/component_kit/cw_dropdown.scss |   4 +-
 3 files changed, 113 insertions(+), 39 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
index 94725126407..f2305fef864 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
@@ -1,55 +1,118 @@
 /* @jsx m */
 
-import m from 'mithril';
+import m, { VnodeDOM } from 'mithril';
 
 import 'components/component_kit/cw_dropdown.scss';
 
-import { CWTextInput } from './cw_text_input';
+import { CWTextInput, TextInputAttrs } from './cw_text_input';
 import { CWPopoverMenuItem } from './cw_popover/cw_popover_menu';
-import { MenuItem } from './types';
+import { DefaultMenuItem } from './types';
+import { ValidationStatus } from './cw_validation_text';
 
 export type DropdownInputAttrs = {
-  inputOptions: Array<MenuItem>;
+  customFilter: (item: DefaultMenuItem, query: string) => DefaultMenuItem[];
+  defaultActiveIndex?: number;
+  defaultMenuItems: DefaultMenuItem[];
+  inputValidationFn?: (value: string) => [ValidationStatus, string];
+  label: string;
+  placeholder?: string;
   onSelect?: (optionLabel: string, index?: number) => void;
-  initialValue?: string;
+  searchable?: boolean;
+  textInputAttrs?: TextInputAttrs;
 };
 
 export class CWDropdown implements m.ClassComponent<DropdownInputAttrs> {
   private showDropdown: boolean;
-  private selectedValue: string;
+  private activeMenuItems: DefaultMenuItem[];
+  private value: string;
 
-  oninit(vnode) {
+  filterMenuItems(
+    items: DefaultMenuItem[],
+    query: string,
+    customFilter?: (item: DefaultMenuItem, query: string) => DefaultMenuItem[]
+  ) {
+    const defaultFilter = (item: DefaultMenuItem) => {
+      return item.label.toLowerCase().includes(query.toLowerCase());
+    };
+    const filterFn = customFilter
+      ? (item: DefaultMenuItem) => customFilter(item, query)
+      : defaultFilter;
+
+    return items.filter(filterFn);
+  }
+
+  oninit(vnode: VnodeDOM<DropdownInputAttrs, this>) {
     this.showDropdown = false;
-    this.selectedValue =
-      vnode.attrs.initialValue ?? vnode.attrs.inputOptions[0].label;
+    this.activeMenuItems = vnode.attrs.defaultMenuItems;
+
+    document.body.addEventListener('click', (event) => {
+      const $dropdown = document.querySelector('.dropdown-wrapper');
+      if (!$dropdown) return;
+      if (!$dropdown.contains(event.target as Node)) {
+        this.showDropdown = false;
+        m.redraw();
+      }
+    });
   }
 
-  view(vnode) {
-    const { inputOptions, onSelect } = vnode.attrs;
+  view(vnode: VnodeDOM<DropdownInputAttrs, this>) {
+    const {
+      customFilter,
+      defaultActiveIndex,
+      defaultMenuItems,
+      inputValidationFn,
+      label,
+      onSelect,
+      placeholder,
+      searchable,
+    } = vnode.attrs;
+    const { activeMenuItems, showDropdown, ...value } = this;
 
     return (
       <div class="dropdown-wrapper">
+        {/* Check with design re: Some sort of visual indicator that this is a typeable field */}
         <CWTextInput
           iconRight="chevronDown"
-          placeholder={this.selectedValue}
-          displayOnly
-          iconRightonclick={() => {
-            // Only here because it makes TextInput display correctly
+          defaultValue={defaultMenuItems[defaultActiveIndex ?? 0].label}
+          displayOnly={!searchable}
+          // Be sure you haven't damaged non-searchable functionality
+          iconRightonclick={(e: MouseEvent) => {
+            this.showDropdown = !showDropdown;
+            e.stopPropagation();
           }}
+          inputValidationFn={inputValidationFn}
           onclick={() => {
-            this.showDropdown = !this.showDropdown;
+            this.value = null;
+            this.showDropdown = true;
+          }}
+          oninput={(e) => {
+            // TODO: Debounce
+            this.showDropdown = true;
+            if (e.target.value?.length > 0) {
+              const inputText = e.target.value;
+              this.activeMenuItems = this.filterMenuItems(
+                defaultMenuItems,
+                inputText,
+                customFilter
+              );
+            } else {
+              this.activeMenuItems = defaultMenuItems;
+            }
           }}
+          label={label}
+          placeholder={placeholder}
+          {...value}
         />
-        {this.showDropdown && (
+        {showDropdown && (
           <div class="dropdown-options-display">
-            {inputOptions.map((item, idx) => {
+            {activeMenuItems.map((item, idx) => {
               return (
                 <CWPopoverMenuItem
                   {...item}
                   type="default"
                   onclick={() => {
                     this.showDropdown = false;
-                    this.selectedValue = item.label;
+                    this.value = item.label;
                     if (onSelect) onSelect(item.label, idx);
                   }}
                 />
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/types.ts b/packages/commonwealth/client/scripts/views/components/component_kit/types.ts
index 59e366899fa..86b546eb32a 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/types.ts
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/types.ts
@@ -39,6 +39,7 @@ export enum ComponentType {
   TextArea = 'TextArea',
   TextInput = 'TextInput',
   ThreadVoteButton = 'ThreadVoteButton',
+  TokenInput = 'TokenInput',
   Toggle = 'Toggle',
   ValidationText = 'ValidationText',
   WalletOptionRow = 'WalletOptionRow',
@@ -49,23 +50,31 @@ export type StyleAttrs = {
   className?: string;
 };
 
+export type DividerMenuItem = { type: 'divider' };
+
+export type HeaderMenuItem = { type: 'header'; label: string };
+
+export type DefaultMenuItem = {
+  disabled?: boolean;
+  iconLeft?: IconName;
+  iconRight?: IconName;
+  isSecondary?: boolean;
+  label: string;
+  onclick?: () => void;
+  type?: 'default';
+};
+
+export type NotificationMenuItem = {
+  hasUnreads: boolean;
+  iconLeft?: IconName;
+  iconRight?: IconName;
+  label: string;
+  onclick: () => void;
+  type: 'notification';
+};
+
 export type MenuItem =
-  | { type: 'divider' }
-  | { type: 'header'; label: string }
-  | {
-      disabled?: boolean;
-      iconLeft?: IconName;
-      iconRight?: IconName;
-      isSecondary?: boolean;
-      label: string;
-      onclick: () => void;
-      type?: 'default';
-    }
-  | {
-      hasUnreads: boolean;
-      iconLeft?: IconName;
-      iconRight?: IconName;
-      label: string;
-      onclick: () => void;
-      type: 'notification';
-    };
+  | DividerMenuItem
+  | HeaderMenuItem
+  | DefaultMenuItem
+  | NotificationMenuItem;
diff --git a/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss b/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss
index 32f5ea2fc42..88956b9b558 100644
--- a/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss
+++ b/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss
@@ -1,4 +1,5 @@
 @import 'shared';
+@import './cw_popover/cw_popover_menu';
 
 .dropdown-wrapper {
   position: relative;
@@ -8,7 +9,8 @@
     border-radius: $border-radius-corners;
     box-shadow: $elevation-3;
     margin-top: 5px;
-    overflow: hidden;
+    max-height: calc(6 * $menu-item-height);
+    overflow: auto;
     position: absolute;
     width: 100%;
     z-index: 1001;

From d679c64e015d24361142d16ee0d1fc34a3822495 Mon Sep 17 00:00:00 2001
From: Graham Johnson <graham@commonwealth.im>
Date: Tue, 1 Nov 2022 14:59:40 -0400
Subject: [PATCH 2/4] Dropdown finishing touches

---
 .../component_kit/cw_component_showcase.tsx   | 44 +++++++++++++------
 .../components/component_kit/cw_dropdown.tsx  | 22 +++++++---
 .../component_kit/cw_text_input.tsx           | 18 +++++---
 .../components/component_kit/cw_dropdown.scss |  4 ++
 .../cw_popover/cw_popover_menu.scss           |  3 ++
 5 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx
index 6ba60492f4d..aeb745a1d2a 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx
@@ -68,19 +68,6 @@ export class ComponentShowcase implements m.ClassComponent {
   view() {
     return (
       <div class="ComponentShowcase">
-        <h1>Dropdown</h1>
-        <div class="form-gallery">
-          <CWDropdown
-            inputOptions={[
-              { label: 'Dropdown Option 1' },
-              { label: 'Dropdown Option 2' },
-              { label: 'Dropdown Option 3' },
-            ]}
-            onSelect={(optionLabel) =>
-              console.log('Selected option: ', optionLabel)
-            }
-          />
-        </div>
         <h1>Spinner</h1>
         <div class="basic-gallery">
           <CWSpinner />
@@ -123,7 +110,7 @@ export class ComponentShowcase implements m.ClassComponent {
                 label: 'Report',
                 iconLeft: 'cautionCircle',
                 isSecondary: true,
-                onclick: () => console.log('clicked'),
+                onclick: () => notifySuccess('clicked'),
               },
             ]}
           />
@@ -394,6 +381,35 @@ export class ComponentShowcase implements m.ClassComponent {
             label="Text area"
             placeholder="Type here"
           />
+          <CWDropdown
+            defaultMenuItems={[
+              { label: 'Dropdown Option 1' },
+              { label: 'Dropdown Option 2' },
+              { label: 'Dropdown Option 3' },
+            ]}
+            onSelect={(optionLabel: string) =>
+              notifySuccess(`Selected option: ${optionLabel}`)
+            }
+          />
+          <CWDropdown
+            defaultMenuItems={[
+              { label: 'Dropdown Option 1' },
+              { label: 'Dropdown Option 2' },
+              { label: 'Dropdown Option 3' },
+            ]}
+            inputValidationFn={(val: string): [ValidationStatus, string] => {
+              if (val.match(/[^A-Za-z]/)) {
+                return ['failure', 'Must enter characters A-Z'];
+              } else {
+                return ['success', 'Input validated'];
+              }
+            }}
+            label="This input accepts chars A-Z"
+            onSelect={(optionLabel) =>
+              notifySuccess(`Selected option: ${optionLabel}`)
+            }
+            searchable={true}
+          />
           <CWCoverImageUploader
             uploadCompleteCallback={(url: string) => {
               notifySuccess(`Image uploaded to ${url.slice(0, 18)}...`);
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
index f2305fef864..e53c842e8cd 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
@@ -66,7 +66,10 @@ export class CWDropdown implements m.ClassComponent<DropdownInputAttrs> {
       placeholder,
       searchable,
     } = vnode.attrs;
-    const { activeMenuItems, showDropdown, ...value } = this;
+
+    // Input value must be passed as spread to CWTextInput, or it will
+    // always overwrite the defaultValue prop
+    const { activeMenuItems, showDropdown, ...thisParams } = this;
 
     return (
       <div class="dropdown-wrapper">
@@ -80,10 +83,19 @@ export class CWDropdown implements m.ClassComponent<DropdownInputAttrs> {
             this.showDropdown = !showDropdown;
             e.stopPropagation();
           }}
-          inputValidationFn={inputValidationFn}
+          inputValidationFn={(val: string) => {
+            console.log({ val });
+            if (defaultMenuItems.find((i) => i.label === val)) {
+              return ['success', 'Input validated'];
+            } else {
+              return inputValidationFn(val);
+            }
+          }}
           onclick={() => {
-            this.value = null;
-            this.showDropdown = true;
+            if (searchable) {
+              delete this.value;
+            }
+            this.showDropdown = !showDropdown;
           }}
           oninput={(e) => {
             // TODO: Debounce
@@ -101,7 +113,7 @@ export class CWDropdown implements m.ClassComponent<DropdownInputAttrs> {
           }}
           label={label}
           placeholder={placeholder}
-          {...value}
+          {...thisParams}
         />
         {showDropdown && (
           <div class="dropdown-options-display">
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
index a7a85c164cb..a51dc699549 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
@@ -18,7 +18,7 @@ export type TextInputAttrs = {
   autocomplete?: string;
   autofocus?: boolean;
   containerClassName?: string;
-  value?: string;
+  defaultValue;
   iconRight?: string;
   iconRightonclick?: () => void;
   inputValidationFn?: (value: string) => [ValidationStatus, string];
@@ -29,10 +29,12 @@ export type TextInputAttrs = {
   onenterkey?: (e) => void;
   onclick?: (e) => void;
   placeholder?: string;
+  required?: boolean;
   tabindex?: number;
+  value?: string;
 };
 
-type InputStyleAttrs = {
+export type InputStyleAttrs = {
   inputClassName?: string;
   darkMode?: boolean;
   disabled?: boolean;
@@ -41,12 +43,12 @@ type InputStyleAttrs = {
   displayOnly?: boolean;
 };
 
-type InputInternalStyleAttrs = {
+export type InputInternalStyleAttrs = {
   hasRightIcon?: boolean;
   isTyping: boolean;
 };
 
-type MessageRowAttrs = {
+export type MessageRowAttrs = {
   hasFeedback?: boolean;
   label: string;
   statusMessage?: string;
@@ -95,6 +97,7 @@ export class CWTextInput implements m.ClassComponent<TextInputAttrs> {
       containerClassName,
       darkMode,
       value,
+      defaultValue,
       disabled,
       iconRight,
       iconRightonclick,
@@ -107,6 +110,7 @@ export class CWTextInput implements m.ClassComponent<TextInputAttrs> {
       onenterkey,
       onclick,
       placeholder,
+      required,
       size = 'large',
       tabindex,
       displayOnly,
@@ -148,13 +152,15 @@ export class CWTextInput implements m.ClassComponent<TextInputAttrs> {
               darkMode,
               inputClassName,
             })}
+            defaultValue={defaultValue}
             disabled={disabled || displayOnly}
             tabindex={tabindex}
             maxlength={maxlength}
             name={name}
             placeholder={placeholder}
+            required={required}
             oninput={(e) => {
-              if (oninput) oninput(e);
+              oninput(e);
 
               if (e.target.value?.length === 0) {
                 this.isTyping = false;
@@ -168,7 +174,7 @@ export class CWTextInput implements m.ClassComponent<TextInputAttrs> {
                 const timeout = e.target.value?.length > 3 ? 250 : 1000;
                 this.inputTimeout = setTimeout(() => {
                   this.isTyping = false;
-                  if (inputValidationFn && e.target.value?.length > 3) {
+                  if (inputValidationFn && e.target.value?.length > 0) {
                     [this.validationStatus, this.statusMessage] =
                       inputValidationFn(e.target.value);
                     m.redraw();
diff --git a/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss b/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss
index 88956b9b558..2ac04c6d0db 100644
--- a/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss
+++ b/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss
@@ -15,4 +15,8 @@
     width: 100%;
     z-index: 1001;
   }
+
+  input:disabled {
+    cursor: pointer;
+  }
 }
diff --git a/packages/commonwealth/client/styles/components/component_kit/cw_popover/cw_popover_menu.scss b/packages/commonwealth/client/styles/components/component_kit/cw_popover/cw_popover_menu.scss
index f5dcfa64457..464c66560bd 100644
--- a/packages/commonwealth/client/styles/components/component_kit/cw_popover/cw_popover_menu.scss
+++ b/packages/commonwealth/client/styles/components/component_kit/cw_popover/cw_popover_menu.scss
@@ -1,10 +1,13 @@
 @import 'shared';
 
+$menu-item-height: 36px;
+
 .PopoverMenuItem {
   align-items: center;
   cursor: pointer;
   display: flex;
   gap: 4px;
+  height: $menu-item-height;
   padding: 8px 16px;
   user-select: none;
 

From fb55a64cc05419362f91ff8cd641ca8a080927f5 Mon Sep 17 00:00:00 2001
From: Graham Johnson <graham@commonwealth.im>
Date: Tue, 1 Nov 2022 15:25:02 -0400
Subject: [PATCH 3/4] Tweaks

---
 .../scripts/views/components/component_kit/cw_dropdown.tsx | 7 +++----
 .../views/components/component_kit/cw_text_input.tsx       | 5 ++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
index e53c842e8cd..28dc2bf2090 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx
@@ -69,22 +69,21 @@ export class CWDropdown implements m.ClassComponent<DropdownInputAttrs> {
 
     // Input value must be passed as spread to CWTextInput, or it will
     // always overwrite the defaultValue prop
+
+    if (!this.activeMenuItems.length) this.showDropdown = false;
     const { activeMenuItems, showDropdown, ...thisParams } = this;
 
     return (
       <div class="dropdown-wrapper">
-        {/* Check with design re: Some sort of visual indicator that this is a typeable field */}
         <CWTextInput
           iconRight="chevronDown"
           defaultValue={defaultMenuItems[defaultActiveIndex ?? 0].label}
           displayOnly={!searchable}
-          // Be sure you haven't damaged non-searchable functionality
           iconRightonclick={(e: MouseEvent) => {
             this.showDropdown = !showDropdown;
             e.stopPropagation();
           }}
           inputValidationFn={(val: string) => {
-            console.log({ val });
             if (defaultMenuItems.find((i) => i.label === val)) {
               return ['success', 'Input validated'];
             } else {
@@ -98,7 +97,6 @@ export class CWDropdown implements m.ClassComponent<DropdownInputAttrs> {
             this.showDropdown = !showDropdown;
           }}
           oninput={(e) => {
-            // TODO: Debounce
             this.showDropdown = true;
             if (e.target.value?.length > 0) {
               const inputText = e.target.value;
@@ -109,6 +107,7 @@ export class CWDropdown implements m.ClassComponent<DropdownInputAttrs> {
               );
             } else {
               this.activeMenuItems = defaultMenuItems;
+              m.redraw();
             }
           }}
           label={label}
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
index a51dc699549..86da90b6f47 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
@@ -11,6 +11,7 @@ import { ValidationStatus } from './cw_validation_text';
 import { CWIcon } from './cw_icons/cw_icon';
 import { CWText } from './cw_text';
 import { CWIconButton } from './cw_icon_button';
+import _ from 'lodash';
 
 type TextInputSize = 'small' | 'large';
 
@@ -160,7 +161,9 @@ export class CWTextInput implements m.ClassComponent<TextInputAttrs> {
             placeholder={placeholder}
             required={required}
             oninput={(e) => {
-              oninput(e);
+              _.debounce(() => {
+                if (oninput) oninput(e);
+              }, 250)();
 
               if (e.target.value?.length === 0) {
                 this.isTyping = false;

From 87dea973d564b4750b4c3f4e0d9d81540c218ac4 Mon Sep 17 00:00:00 2001
From: Graham Johnson <graham@commonwealth.com>
Date: Wed, 2 Nov 2022 15:51:03 -0400
Subject: [PATCH 4/4] Add typing to CWTextInput

---
 .../component_kit/cw_text_input.tsx           | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
index 86da90b6f47..fbfc160b0b3 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx
@@ -1,9 +1,10 @@
 /* @jsx m */
 
-import m from 'mithril';
+import m, { VnodeDOM } from 'mithril';
 
 import 'components/component_kit/cw_text_input.scss';
 
+import _ from 'lodash';
 import { ComponentType } from './types';
 import { getClasses } from './helpers';
 import { CWLabel } from './cw_label';
@@ -11,10 +12,18 @@ import { ValidationStatus } from './cw_validation_text';
 import { CWIcon } from './cw_icons/cw_icon';
 import { CWText } from './cw_text';
 import { CWIconButton } from './cw_icon_button';
-import _ from 'lodash';
 
 type TextInputSize = 'small' | 'large';
 
+export type InputStyleAttrs = {
+  inputClassName?: string;
+  darkMode?: boolean;
+  disabled?: boolean;
+  size: TextInputSize;
+  validationStatus?: ValidationStatus;
+  displayOnly?: boolean;
+};
+
 export type TextInputAttrs = {
   autocomplete?: string;
   autofocus?: boolean;
@@ -33,16 +42,7 @@ export type TextInputAttrs = {
   required?: boolean;
   tabindex?: number;
   value?: string;
-};
-
-export type InputStyleAttrs = {
-  inputClassName?: string;
-  darkMode?: boolean;
-  disabled?: boolean;
-  size: TextInputSize;
-  validationStatus?: ValidationStatus;
-  displayOnly?: boolean;
-};
+} & InputStyleAttrs;
 
 export type InputInternalStyleAttrs = {
   hasRightIcon?: boolean;
@@ -57,8 +57,8 @@ export type MessageRowAttrs = {
 };
 
 export class MessageRow implements m.ClassComponent<MessageRowAttrs> {
-  view(vnode) {
-    const { hasFeedback, label, statusMessage, validationStatus, displayOnly } =
+  view(vnode: VnodeDOM<MessageRowAttrs, this>) {
+    const { hasFeedback, label, statusMessage, validationStatus } =
       vnode.attrs;
 
     return (
@@ -91,13 +91,13 @@ export class CWTextInput implements m.ClassComponent<TextInputAttrs> {
   private statusMessage?: string = '';
   private validationStatus?: ValidationStatus = undefined;
 
-  view(vnode) {
+  view(vnode: VnodeDOM<TextInputAttrs, this>) {
     const {
       autocomplete = 'off',
       autofocus,
       containerClassName,
       darkMode,
-      value,
+      displayOnly,
       defaultValue,
       disabled,
       iconRight,
@@ -114,7 +114,7 @@ export class CWTextInput implements m.ClassComponent<TextInputAttrs> {
       required,
       size = 'large',
       tabindex,
-      displayOnly,
+      value,
     } = vnode.attrs;
 
     return (