Added onfocus, fixed autosearch clearing itself on widget reload

dist/tmp/widgets/Autosearch.xml

@@ -34,7 +34,11 @@
                     <description/>
                 </property>
                 <property key="onEnter" type="action" required="false">
-                    <caption>On enter</caption>
+                    <caption>On focus</caption>
+                    <description/>
+                </property>
+                <property key="onLeave" type="action" required="false">
+                    <caption>On submit</caption>
                     <description/>
                 </property>
             </propertyGroup>

dist/tmp/widgets/incentro/autosearch/Autosearch.js

@@ -262,9 +262,10 @@ class Autosearch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         this.onChangeHandler = this.onChange.bind(this);
         this.onTouchStart = this.onTouch.bind(this);
         this.onEndHandler = this.onEnd.bind(this);
+        this.onLeaveHandler = this.onLeave.bind(this);
         this.inputRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["createRef"])();
         this.state = {
-            textboxValue: '',
+            textboxValue: this.props.searchvalue.displayValue,
         };
     }
     componentDidUpdate(prevProps) {
@@ -284,11 +285,14 @@ class Autosearch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
                 this.setState({ textboxValue: '' });
                 (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.clear;
             }
+            else {
+                this.setState({ textboxValue: this.props.searchvalue.displayValue });
+            }
         }
     }
     render() {
         return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.input },
-            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TextInput"], { style: this.styles.text, value: this.state.textboxValue, onChangeText: this.onChangeHandler, onTouchStart: this.onTouchStart, onEndEditing: this.onEndHandler, placeholder: 'Zoeken naar monumentenborden', placeholderTextColor: "#5997C0", editable: this.props.editable, ref: this.inputRef })));
+            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TextInput"], { style: this.styles.text, value: this.state.textboxValue, onChangeText: this.onChangeHandler, onFocus: this.onTouchStart, onSubmitEditing: this.onLeaveHandler, onEndEditing: this.onEndHandler, placeholder: 'Zoeken naar monumentenborden', placeholderTextColor: "#5997C0", editable: this.props.editable, ref: this.inputRef })));
     }
     onChange(text) {
         this.setState({ textboxValue: text });
@@ -302,6 +306,10 @@ class Autosearch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         var _a;
         (_a = this.props.onChange) === null || _a === void 0 ? void 0 : _a.execute();
     }
+    onLeave() {
+        var _a;
+        (_a = this.props.onLeave) === null || _a === void 0 ? void 0 : _a.execute();
+    }
 }
 
 

src/Autosearch.tsx

@@ -37,11 +37,12 @@ export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, Stat
     private readonly onChangeHandler = this.onChange.bind(this);
     private readonly onTouchStart = this.onTouch.bind(this);
     private readonly onEndHandler = this.onEnd.bind(this);
+    private readonly onLeaveHandler = this.onLeave.bind(this);
     inputRef = createRef<TextInput>();
     constructor(props: AutosearchProps<AutosearchStyle>){
         super(props)
         this.state = {
-               textboxValue: '',
+               textboxValue: this.props.searchvalue.displayValue,
         }
     }
 
@@ -60,6 +61,9 @@ export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, Stat
                 this.setState({textboxValue: ''});
                 this.inputRef.current?.clear;
             }
+            else {
+                this.setState({textboxValue: this.props.searchvalue.displayValue});
+            }
         }
     }
 
@@ -69,7 +73,8 @@ export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, Stat
                 <TextInput style={this.styles.text} 
                 value={this.state.textboxValue} 
                 onChangeText={this.onChangeHandler}
-                onTouchStart={this.onTouchStart}
+                onFocus={this.onTouchStart}
+                onSubmitEditing={this.onLeaveHandler}
                 onEndEditing={this.onEndHandler}
                 placeholder={'Zoeken naar monumentenborden'}
                 placeholderTextColor="#5997C0"
@@ -93,4 +98,8 @@ export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, Stat
     private onEnd() {
         this.props.onChange?.execute();
     }
+
+    private onLeave() {
+        this.props.onLeave?.execute();
+    }
 }

src/Autosearch.xml

@@ -34,7 +34,11 @@
                     <description/>
                 </property>
                 <property key="onEnter" type="action" required="false">
-                    <caption>On enter</caption>
+                    <caption>On focus</caption>
+                    <description/>
+                </property>
+                <property key="onLeave" type="action" required="false">
+                    <caption>On submit</caption>
                     <description/>
                 </property>
             </propertyGroup>

typings/AutosearchProps.d.ts

@@ -13,6 +13,7 @@ export interface AutosearchProps<Style> {
     autoFocus: EditableValue<boolean>;
     onChange?: ActionValue;
     onEnter?: ActionValue;
+    onLeave?: ActionValue;
 }
 
 export interface AutosearchPreviewProps {
@@ -23,4 +24,5 @@ export interface AutosearchPreviewProps {
     autoFocus: string;
     onChange: {} | null;
     onEnter: {} | null;
+    onLeave: {} | null;
 }