fix: filter items not working with maquette

maquette is setting props, not attributes. This workaround fixes that for now.
Esri · Oct 23, 2019 · 37a074c · 37a074c
1 parent ef85cd2
commit 37a074c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 14 deletions.
diff --git a/src/components/calcite-pick-list/calcite-pick-list.tsx b/src/components/calcite-pick-list/calcite-pick-list.tsx
@@ -101,16 +101,8 @@ export class CalcitePickList {
   //
   // --------------------------------------------------------------------------
 
-  connectedCallback() {
-    this.setUpItems();
-  }
-
   componentDidLoad() {
-    this.items.forEach((item) => {
-      if (item.hasAttribute("selected")) {
-        this.selectedValues.set(item.getAttribute("value"), item);
-      }
-    });
+    this.setUpItems();
     this.observer.observe(this.el, { childList: true, subtree: true });
   }
 
@@ -221,7 +213,7 @@ export class CalcitePickList {
       Array.from(item.attributes).forEach((attr) => {
         obj[attr.name] = attr.value;
       });
-      obj.metadata = item.metadata;
+      obj.metadata = item.metadata; // read from prop not attribute
       result.push(obj);
     });
     return result;

diff --git a/src/demos/calcite-pick-list.html b/src/demos/calcite-pick-list.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Demos - PickList</title>
     <script src="head.js"></script>
-    
+
   </head>
   <body>
     <nav>
@@ -29,17 +29,17 @@ <h1>calcite-pick-list</h1>
               margin-bottom: 1rem;
             }
         </style>
-        
+
         <div class="toggles">
           <calcite-button onclick="toggleProperty('loading')">Toggle loading</calcite-button>
           <calcite-button onclick="toggleProperty('disabled')">Toggle disabled</calcite-button>
         </div>
-      
+
           <calcite-pick-list id="one" multiple filter-enabled>
               <calcite-action slot="menu-actions" indicator label="Cool" text="Cool"
               ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14 4H2V3h12zm0 4H2v1h12zm0 5H2v1h12z"/></svg>
             </calcite-action>
-            <calcite-pick-list-item text-label="2018 Population Density (NO SUMMARY) (Esri)" value="POPDENS_CY">
+            <calcite-pick-list-item text-label="2018 Population Density (NO SUMMARY) (Esri)" value="POPDENS_CY" selected>
               <calcite-action slot="secondaryAction" id="action-test" label="click-me" onClick="console.log('clicked');">
                 <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                   <circle cx="7" cy="7" r="7" fill="#f689d8" />