From 12846ccc389ca4d920d506cf7fc86e769eb89b5d Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 1 Feb 2021 13:42:21 -0800
Subject: [PATCH] Allow ValueSelector to clear

---
 webapp/src/widgets/valueSelector.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx
index b015fd7a7..8f8164d58 100644
--- a/webapp/src/widgets/valueSelector.tsx
+++ b/webapp/src/widgets/valueSelector.tsx
@@ -32,18 +32,18 @@ type State = {
 }
 
 class ValueSelector extends React.Component<Props, State> {
-    public constructor(props: Props) {
+    constructor(props: Props) {
         super(props)
         this.state = {
             activated: false,
         }
     }
 
-    public shouldComponentUpdate(): boolean {
+    shouldComponentUpdate(): boolean {
         return true
     }
 
-    renderLabel = (option: IPropertyOption, meta: FormatOptionLabelMeta<IPropertyOption>): React.ReactNode => {
+    private renderLabel = (option: IPropertyOption, meta: FormatOptionLabelMeta<IPropertyOption>): React.ReactNode => {
         if (meta.context === 'value') {
             return <span className={`octo-label ${option.color}`} >{option.value}</span>
         }
@@ -76,7 +76,7 @@ class ValueSelector extends React.Component<Props, State> {
         )
     }
 
-    public render(): JSX.Element {
+    render(): JSX.Element {
         if (!this.state.activated) {
             return (
                 <div
@@ -91,6 +91,7 @@ class ValueSelector extends React.Component<Props, State> {
         }
         return (
             <CreatableSelect
+                isClearable={true}
                 styles={{
                     indicatorsContainer: (provided: CSSProperties): CSSProperties => ({
                         ...provided,
@@ -138,6 +139,8 @@ class ValueSelector extends React.Component<Props, State> {
                 onChange={(value: ValueType<IPropertyOption>, action: ActionMeta<IPropertyOption>): void => {
                     if (action.action === 'select-option') {
                         this.props.onChange((value as IPropertyOption).id)
+                    } else if (action.action === 'clear') {
+                        this.props.onChange('')
                     }
                 }}
                 onCreateOption={this.props.onCreate}