math-main-components 0.0.43 → 0.0.45

package/dist/components/CardButton/CardButton.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 export declare function CardButton({ title, iconName, onClick, }: {
     title: string;
     iconName: string;
-    onClick?: (event: any) => {};
+    onClick?: (event: MouseEvent<HTMLDivElement>) => {};
 }): React.JSX.Element;

package/dist/components/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ export interface DialogData {
 export declare function Dialog({ data, text, onClose, onSubmit, children }: {
     data?: DialogData;
     text?: any;
-    onClose?: (event: React.MouseEvent<HTMLDivElement>, data: any) => void;
-    onSubmit?: (event: React.MouseEvent<HTMLButtonElement>, data: any) => void;
+    onClose?: (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, data?: any | undefined) => void;
+    onSubmit?: (event: React.MouseEvent<HTMLButtonElement>, data?: any | undefined) => void;
     children: any;
 }): React.JSX.Element;

package/dist/components/InputNames/InputNames.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 export declare function InputNames({ width, placeholder, title, defaultValue, onInput, onInputFirstName, onInputLastName, }: {
     width?: string;
     placeholder?: {
@@ -13,7 +13,7 @@ export declare function InputNames({ width, placeholder, title, defaultValue, on
         firstName?: string;
         lastName?: string;
     };
-    onInput?: (name: string, event: MouseEvent<HTMLInputElement>) => void;
-    onInputFirstName?: (event: MouseEvent<HTMLInputElement>) => void;
-    onInputLastName?: (event: MouseEvent<HTMLInputElement>) => void;
+    onInput?: (name: string, event: ChangeEvent<HTMLInputElement>) => void;
+    onInputFirstName?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onInputLastName?: (event: ChangeEvent<HTMLInputElement>) => void;
 }): React.JSX.Element;

package/dist/components/InputNumber/InputNumber.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute, MouseEvent } from 'react';
+import React, { ChangeEvent, HTMLInputTypeAttribute } from 'react';
 export declare function InputNumber({ title, name, placeholder, defaultValue, autoFocus, type, width, available, onInput }: {
     title: string;
     name: string;
@@ -8,5 +8,5 @@ export declare function InputNumber({ title, name, placeholder, defaultValue, au
     type?: HTMLInputTypeAttribute;
     width?: string;
     available?: boolean;
-    onInput?: (event: MouseEvent<HTMLInputElement>) => void;
+    onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
 }): React.JSX.Element;

package/dist/components/InputText/InputText.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 export declare function InputText({ title, name, placeholder, defaultValue, autoFocus, type, width, marginBottom, available, onInput }: {
     title: string;
     name: string;
@@ -9,5 +9,5 @@ export declare function InputText({ title, name, placeholder, defaultValue, auto
     width?: string;
     marginBottom?: string;
     available?: boolean;
-    onInput?: (event: MouseEvent<HTMLInputElement>) => void;
+    onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
 }): React.JSX.Element;

package/dist/components/OptionFieldHorizontal/OptionFieldHorizontal.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 export declare function OptionFieldHorizontal({ title, iconName, onClick, preselected }: {
     title: string;
     iconName?: string;
-    onClick?: (event: any) => void;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
     preselected?: boolean;
 }): React.JSX.Element;

package/dist/components/RadioButtons/RadioButtons.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 export declare class RadioOption {
     text: string;
     name: string;
@@ -8,6 +8,6 @@ export declare function RadioButtons({ options, group, selected, onClick, width
     options: RadioOption[];
     group: string;
     selected?: string;
-    onClick?: (event: any) => void;
+    onClick?: (event: ChangeEvent<HTMLInputElement>) => void;
     width?: string;
 }): React.JSX.Element;

package/dist/components/Searchbar/Searchbar.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { ChangeEvent, MouseEvent } from 'react';
 export declare function Searchbar({ placeholder, title, showNoResults, errorTitle, errorMessage, errorButton, helpTitle, helpMessage, errorAction, onInput, onClickResult, withButton, buttonText, suggestions, autoFocus, results }: {
     placeholder: string;
     title?: string;
@@ -9,7 +9,7 @@ export declare function Searchbar({ placeholder, title, showNoResults, errorTitl
     helpTitle?: string;
     helpMessage?: string;
     errorAction?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onInput?: (event: MouseEvent<HTMLInputElement>) => void;
+    onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
     onClickResult?: (event: MouseEvent<HTMLLIElement>, result: any) => void;
     withButton?: boolean;
     buttonText?: string;

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 export declare enum TableActionType {
     red = 0,
     default = 1
@@ -14,9 +14,9 @@ export declare class TableItem {
 export declare class TableItemAction {
     title: string;
     iconName: string;
-    onClick: (event: any, item: TableItem, index: number) => void;
+    onClick: (event: MouseEvent<HTMLDivElement>, item: TableItem, index: number) => void;
     type: TableActionType;
-    constructor(title: string, iconName: string, type: TableActionType, onClick?: (event: any, item: TableItem, index: number) => void);
+    constructor(title: string, iconName: string, type: TableActionType, onClick?: (event: MouseEvent<HTMLDivElement>, item: TableItem, index: number) => void);
 }
 export declare function Table({ items, title, actions, moreActions }: {
     items: TableItem[];

package/dist/index.cjs.js

@@ -134,11 +134,13 @@ var css_248z$m = ".styles-module_container__9-1MH {\n  position: fixed;\n  heigh
 var styles$m = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
 styleInject(css_248z$m);
 
-function Dialog({ data, text, onClose = (event, data) => { }, onSubmit = (event, data) => { }, children = null }) {
+function Dialog({ data, text, onClose, onSubmit, children }) {
     function onClick(event) {
-        if (event.target.id == 'dialog-backdrop' || event.target.id == 'cancel-button') {
-            if (data)
-                onClose(event, data.data);
+        event.preventDefault();
+        const id = event.currentTarget.id;
+        if (["dialog-backdrop", "cancel-button"].includes(id)) {
+            if (onClose)
+                onClose(event, data?.data);
         }
     }
     return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles$m.container} ${data?.isActive ? styles$m.active : styles$m.disabled}`, onClick: onClick },
@@ -146,7 +148,7 @@ function Dialog({ data, text, onClose = (event, data) => { }, onSubmit = (event,
             children,
             text && React__default["default"].createElement("h1", null, text),
             React__default["default"].createElement("button", { className: styles$m.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
-            React__default["default"].createElement("button", { className: styles$m.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data?.data) }, "Best\u00E4tigen"))));
+            React__default["default"].createElement("button", { className: styles$m.submit_button, id: "submit-button", onClick: (event) => onSubmit && onSubmit(event, data?.data) }, "Best\u00E4tigen"))));
 }
 
 var css_248z$l = ".styles-module_container__HOoBj {\n  margin-bottom: 30px;\n}\n.styles-module_container__HOoBj button {\n  padding: 12px 18px;\n  border-radius: 40px;\n  border: none;\n  color: white;\n  font-size: 16px;\n  background: #0075FF;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n}";
@@ -324,16 +326,15 @@ function InputPin({ name, length, onFinished = () => { } }) {
             ref.current.value = "";
         });
     }
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$e.container },
-            React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
-            React__default["default"].createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
-                if (i == 0) {
-                    return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
-                }
+    return (React__default["default"].createElement("div", { className: styles$e.container },
+        React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
+        React__default["default"].createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
+            if (i == 0) {
                 return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
-            })),
-            React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen"))));
+            }
+            return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
+        })),
+        React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
 }
 
 var css_248z$d = ".styles-module_container__zcXGF {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.styles-module_input__Tpth8 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1.5px solid #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n  border-color: #0075FF;\n  box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n  border-color: #e50000;\n  box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n  position: relative;\n}\n\n.styles-module_label__appHO {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: white;\n  color: grey;\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: grey;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9411764706), hsla(0, 0%, 100%, 0.951));\n  color: #0063d4;\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  color: #a8a8a8;\n}";
@@ -350,7 +351,8 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
         React__default["default"].createElement("div", { className: styles$d.container, style: { width, marginBottom } },
             React__default["default"].createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
                     setValue(event.target.value);
-                    onInput(event);
+                    if (onInput)
+                        onInput(event);
                 } }),
             React__default["default"].createElement("label", { htmlFor: "text", className: styles$d.label },
                 React__default["default"].createElement("span", { className: styles$d.label_text }, title)))));
@@ -432,9 +434,9 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
     }
     return (React__default["default"].createElement("div", { className: styles$8.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$8.option, key: option.name },
         selected && selected == option.name ?
-            React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected, defaultChecked: true })
+            React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
             :
-                React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected }),
+                React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
         React__default["default"].createElement("label", { htmlFor: option.name }, option.text)))));
 }
 
@@ -504,12 +506,15 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
     const [inputFocused, setFocused] = React.useState(false);
     const [searchResults, setSearchResults] = React.useState(results);
     function onInputChanged(event) {
+        event.preventDefault();
         setValue(event.target.value);
         updateSearch(event);
         onInput(event);
     }
     function updateSearch(event) {
-        if (event.target.value == '' || event.target.value == undefined || event.target.value == null) {
+        event.preventDefault();
+        const value = event.target.value;
+        if (value == '' || value == undefined || value == null) {
             setSearchResults(results);
         }
         else {

package/dist/index.esm.js

@@ -126,11 +126,13 @@ var css_248z$m = ".styles-module_container__9-1MH {\n  position: fixed;\n  heigh
 var styles$m = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
 styleInject(css_248z$m);
 
-function Dialog({ data, text, onClose = (event, data) => { }, onSubmit = (event, data) => { }, children = null }) {
+function Dialog({ data, text, onClose, onSubmit, children }) {
     function onClick(event) {
-        if (event.target.id == 'dialog-backdrop' || event.target.id == 'cancel-button') {
-            if (data)
-                onClose(event, data.data);
+        event.preventDefault();
+        const id = event.currentTarget.id;
+        if (["dialog-backdrop", "cancel-button"].includes(id)) {
+            if (onClose)
+                onClose(event, data?.data);
         }
     }
     return (React.createElement("div", { id: "dialog-backdrop", className: `${styles$m.container} ${data?.isActive ? styles$m.active : styles$m.disabled}`, onClick: onClick },
@@ -138,7 +140,7 @@ function Dialog({ data, text, onClose = (event, data) => { }, onSubmit = (event,
             children,
             text && React.createElement("h1", null, text),
             React.createElement("button", { className: styles$m.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
-            React.createElement("button", { className: styles$m.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data?.data) }, "Best\u00E4tigen"))));
+            React.createElement("button", { className: styles$m.submit_button, id: "submit-button", onClick: (event) => onSubmit && onSubmit(event, data?.data) }, "Best\u00E4tigen"))));
 }
 
 var css_248z$l = ".styles-module_container__HOoBj {\n  margin-bottom: 30px;\n}\n.styles-module_container__HOoBj button {\n  padding: 12px 18px;\n  border-radius: 40px;\n  border: none;\n  color: white;\n  font-size: 16px;\n  background: #0075FF;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n}";
@@ -316,16 +318,15 @@ function InputPin({ name, length, onFinished = () => { } }) {
             ref.current.value = "";
         });
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$e.container },
-            React.createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
-            React.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
-                if (i == 0) {
-                    return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
-                }
+    return (React.createElement("div", { className: styles$e.container },
+        React.createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
+        React.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
+            if (i == 0) {
                 return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
-            })),
-            React.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen"))));
+            }
+            return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
+        })),
+        React.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
 }
 
 var css_248z$d = ".styles-module_container__zcXGF {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.styles-module_input__Tpth8 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1.5px solid #a8a8a8;\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n  border-color: #0075FF;\n  box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n  border-color: #e50000;\n  box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n  position: relative;\n}\n\n.styles-module_label__appHO {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: white;\n  color: grey;\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: grey;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9411764706), hsla(0, 0%, 100%, 0.951));\n  color: #0063d4;\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  color: #a8a8a8;\n}";
@@ -342,7 +343,8 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
         React.createElement("div", { className: styles$d.container, style: { width, marginBottom } },
             React.createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
                     setValue(event.target.value);
-                    onInput(event);
+                    if (onInput)
+                        onInput(event);
                 } }),
             React.createElement("label", { htmlFor: "text", className: styles$d.label },
                 React.createElement("span", { className: styles$d.label_text }, title)))));
@@ -424,9 +426,9 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
     }
     return (React.createElement("div", { className: styles$8.container, style: { width: width } }, options.map((option) => React.createElement("div", { className: styles$8.option, key: option.name },
         selected && selected == option.name ?
-            React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected, defaultChecked: true })
+            React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
             :
-                React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected }),
+                React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
         React.createElement("label", { htmlFor: option.name }, option.text)))));
 }
 
@@ -496,12 +498,15 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
     const [inputFocused, setFocused] = useState(false);
     const [searchResults, setSearchResults] = useState(results);
     function onInputChanged(event) {
+        event.preventDefault();
         setValue(event.target.value);
         updateSearch(event);
         onInput(event);
     }
     function updateSearch(event) {
-        if (event.target.value == '' || event.target.value == undefined || event.target.value == null) {
+        event.preventDefault();
+        const value = event.target.value;
+        if (value == '' || value == undefined || value == null) {
             setSearchResults(results);
         }
         else {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.43",
+    "version": "0.0.45",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*"