@etsoo/materialui 1.1.50 → 1.1.51

package/lib/TagList.js

@@ -12,7 +12,7 @@ export function TagList(props) {
     // Destruct
     const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
         React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
-        option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, label, inputProps, ...rest } = props;
+        option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [options, setOptions] = React.useState([]);
     const loading = open && options.length === 0;
@@ -24,14 +24,17 @@ export function TagList(props) {
         }
         setOptions(result);
     };
-    return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, open: open, onOpen: () => {
+    return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);
             if (options.length === 0) {
                 loadDataLocal();
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+                // Stop bubble
+                event.preventDefault();
+                event.stopPropagation();
                 await loadDataLocal(event.target.value);
             }, ...inputProps, ...params })), getOptionDisabled: (item) => {
             return item === moreLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.50",
+  "version": "1.1.51",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/TagList.tsx

@@ -66,6 +66,8 @@ export function TagList(props: TagListProps) {
     openText = openDefault,
     loadData,
     maxItems = 16,
+    disableCloseOnSelect = true,
+    openOnFocus = true,
     label,
     inputProps,
     ...rest
@@ -87,6 +89,7 @@ export function TagList(props: TagListProps) {
     <Autocomplete<string, true, false, true>
       multiple
       freeSolo
+      filterOptions={(options, _state) => options}
       open={open}
       onOpen={() => {
         setOpen(true);
@@ -99,6 +102,8 @@ export function TagList(props: TagListProps) {
       }}
       options={options}
       loading={loading}
+      disableCloseOnSelect={disableCloseOnSelect}
+      openOnFocus={openOnFocus}
       renderOption={renderOption}
       renderTags={renderTags}
       renderInput={(params) => (
@@ -106,6 +111,10 @@ export function TagList(props: TagListProps) {
           label={label}
           changeDelay={480}
           onChange={async (event) => {
+            // Stop bubble
+            event.preventDefault();
+            event.stopPropagation();
+
             await loadDataLocal(event.target.value);
           }}
           {...inputProps}