add clearable args;

README.md

@@ -192,7 +192,8 @@ To further customize the styling of the searchbox, you can override the default
    "clear":{
       "width":20,
       "height":20,
-      "icon":"cross"
+      "icon":"cross",
+      "clearable":"always"
    },
    "dropdown":{
       "rotate":true,

setup.py

@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="streamlit-searchbox",
-    version="0.1.17a",
+    version="0.1.17",
     author="m-wrzr",
     description="Autocomplete Searchbox",
     long_description="Streamlit searchbox that dynamically updates "

streamlit_searchbox/__init__.py

@@ -150,6 +150,8 @@ def _set_defaults(
     {
         # determines which icon is used for the clear button
         "icon": Literal["circle-unfilled", "circle-filled", "cross"],
+        # determines when the clear button is shown
+        "clearable": Literal["always", "never", "after-submit"],
         # further css styles for the clear button
         "width": int,
         "height": int,

streamlit_searchbox/frontend/src/Searchbox.tsx

@@ -139,6 +139,9 @@ class Searchbox extends StreamlitComponentBase<State> {
       }
     };
 
+    // option when the clear button is shown
+    const clearable = this.props.args.style_overrides?.clear?.clearable;
+
     return (
       <div style={this.props.args.style_overrides?.wrapper || {}}>
         {this.props.args.label && (
@@ -149,9 +152,19 @@ class Searchbox extends StreamlitComponentBase<State> {
           // showing the disabled react-select leads to the component
           // not showing the inputValue but just an empty input field
           // we therefore need to re-render the component if we want to keep the focus
-          value={this.state.option}
+          value={
+            this.state.option === null &&
+            this.state.inputValue &&
+            clearable === "always"
+              ? {
+                  value: null,
+                  label: null,
+                }
+              : this.state.option
+          }
+          // value={this.state.option}
           inputValue={editableAfterSubmit ? this.state.inputValue : undefined}
-          isClearable={true}
+          isClearable={clearable !== "never"}
           isSearchable={true}
           styles={this.style.select}
           options={this.props.args.options}