adding cancel for modal, adding event for paste

example/assets-manifest.json

@@ -1,5 +1,5 @@
 {
     "/example/js/spritemap.js": "/example/js/spritemap.js?version=7ce719c9e00cdc31c694d971b9a5e812",
-    "/example/js/example.js": "/example/js/example.js?version=b2462247bc6cf4d981a713b1080987b1",
+    "/example/js/example.js": "/example/js/example.js?version=a4fbc68b770511e5798ce3b01924c004",
-    "/example/css/styles.css": "/example/css/styles.css?version=71ef67f822ecc43220ddcaa6695b51ac"
+    "/example/css/styles.css": "/example/css/styles.css?version=ec34f0e517fe635c7529d3f549b1149f"
 }

example/css/styles.css

@@ -2379,14 +2379,14 @@ svg.field-choice__checked {
   align-items: center;
 }
 .field-select__selections-list {
-  margin: 0 0 -3px;
+  margin: 0 0 -0.23em;
   padding: 0;
   list-style: none;
 }
 .field-select__selections-item {
   margin-right: 0.25rem;
   user-select: none;
-  margin-bottom: 3px;
+  margin-bottom: 0.23em;
 }
 .field-select__selections-item:hover {
   cursor: default;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tiny-components/select",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Select with filter for Desktop and Mobile",
     "repository": {
         "type": "git",

src/select.riot

@@ -7,7 +7,7 @@
 
         <div class="field-text field-select__selections" onclick={ (event) => { handleToggleSelection(event) } }>
             <ul class="field-select__selections-list">
-                <li class="badge badge--success field-select__selections-item" each={ item in state.selected } onclick={ (event) => { handleToggle(event, item) } }>
+                <li class="badge badge--success field-select__selections-item" each={ item in state.selected } onclick={ (event) => { handleToggle(event, item, 'selected') } }>
                     { item[ state.keys.label ] }
                     <button type="button" class="field-select__selections-remove">
                         &#11198;
@@ -24,18 +24,18 @@
                 <div class="panel">
                     <div class="bar justify-content-end">
                         <div class="bar__start">
-                            { state.selected.length } / { state.options.length } &#128455;
+                            { state.preSelected.length } / { state.options.length } &#128455;
                         </div>
                     </div>
                     <div class="{ getFilterClasses(['field-select__options-filter']) }" if={ props.searchable !== undefined }>
-                        <input type="text" class="field-text m-top-0" placeholder={ props.placeholderFilter } onkeyup={ (event) => { handleOnKeyUp(event) }} disabled={ props.disabled !== undefined } />
+                        <input type="text" class="field-text m-top-0" placeholder={ props.placeholderFilter } paste={ (event) => { handleOnKeyUp(event) }} onkeyup={ (event) => { handleOnKeyUp(event) }} disabled={ props.disabled !== undefined } />
                         <button type="button" class="field-select__options-filter-reset" onclick={ (event) => { handleResetSearchable(event) } }>
                             &#11198;
                         </button>
                     </div>
                     <div class="field-select__options-panel">
                         <ul class="field-select__options-list">
-                            <li class="{ getItemClasses(['field-select__options-item'], option) }" each={ option in state.options } onclick={ (event) => { handleToggle(event, option) } }>
+                            <li class="{ getItemClasses(['field-select__options-item'], option) }" each={ option in state.options } onclick={ (event) => { handleToggle(event, option, 'preSelected') } }>
                                 <span class="field-select__options-item-check">
                                     &#9745;
                                 </span>
@@ -50,6 +50,9 @@
                         </ul>
                     </div>
                     <div class="display-flex">
+                        <button type="button" class="button button--danger button--full m-bottom-0 w-100" onclick={ (event) => { handleOptionsCancel(event) } }>
+                            &#128473;
+                        </button>
                         <button type="button" class="button button--success button--full m-bottom-0 w-100" onclick={ (event) => { handleOptionsConfirm(event) } }>
                             &#10003;
                         </button>
@@ -76,6 +79,7 @@
                         value: 'value'
                     },
                     selected: [],
+                    preSelected: [],
                     hasUpdated: false,
                     options: [],
                     query: '',
@@ -158,7 +162,20 @@
                 })
             },
 
+            /**
+             *  adding preSelected to selected, close modal
+             *
+             */
             handleOptionsConfirm(event) {
+                this.state.selected = JSON.parse(JSON.stringify(this.state.preSelected))
+                this.handleToggleSelection(event)
+            },
+
+            /**
+             *  close modal
+             *
+             */
+            handleOptionsCancel(event) {
                 this.handleToggleSelection(event)
             },
 
@@ -177,6 +194,7 @@
                     this.state.isSelectionOpen = false
                 } else {
                     this.state.isSelectionOpen = true
+                    this.state.preSelected = JSON.parse(JSON.stringify(this.state.selected))
                 }
 
                 this.update()
@@ -205,7 +223,7 @@
              *  toggle selected, if not found add to selected
              *
              */
-            handleToggle(event, option) {
+            handleToggle(event, option, key) {
 
                 event.stopPropagation()
 
@@ -214,16 +232,16 @@
                     return false
                 }
 
-                const index = this.searchSelected(option)
+                const index = this.search(option, this.state[key])
 
                 if (index !== false) {
-                    this.state.selected.splice(index, 1)
+                    this.state[key].splice(index, 1)
                 } else {
-                    if ((this.props.multiple === undefined && this.state.selected.length > 0)) {
+                    if ((this.props.multiple === undefined && this.state[key].length > 0)) {
-                        this.state.selected = []
+                        this.state[key] = []
                     }
 
-                    this.state.selected.push(option)
+                    this.state[key].push(option)
                 }
 
                 this.update()
@@ -246,7 +264,7 @@
              *
              */
             getItemClasses(classes, option) {
-                const index = this.searchSelected(option)
+                const index = this.search(option, this.state.preSelected)
 
                 if (index !== false) {
                     classes.push('field-select__options-item--selected')
@@ -280,11 +298,11 @@
              *
              *  @param options object
              */
-            searchSelected(option) {
+            search(option, items) {
                 let index = false
 
-                for (let i = 0; i < this.state.selected.length; i++) {
+                for (let i = 0; i < items.length; i++) {
-                    if (this.state.selected[i] && this.state.selected[i][ this.state.keys.value ] == option[ this.state.keys.value ]) {
+                    if (items[i] && items[i][ this.state.keys.value ] == option[ this.state.keys.value ]) {
                         index = i
                         break;
                     }

src/styles.scss

@@ -133,7 +133,7 @@
         align-items: center;
 
         &-list {
-            margin: 0 0 -3px;
+            margin: 0 0 -0.23em;
             padding: 0;
             list-style: none;
         }
@@ -141,7 +141,7 @@
         &-item {
             margin-right: 0.25rem;
             user-select: none;
-            margin-bottom: 3px;
+            margin-bottom: 0.23em;
 
             &:hover {
                 cursor: default;