feat(optionSelected): store selected menu option object directly in s…

…elect
AlaskaAirlines · Mar 29, 2022 · 01ef6ee · 01ef6ee
1 parent 168f3d6
commit 01ef6ee
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 28 deletions.
diff --git a/demo/alertValue.js b/demo/alertValue.js
@@ -1,7 +1,6 @@
 setTimeout(() => {
-  document.querySelector('#valueAlert').addEventListener('selectedOption', () => {
-    const menu = document.querySelector('#valueAlert auro-menu');
-    console.warn('Value selected:', menu.optionSelected.value);
-    alert(`Value selected: ${menu.optionSelected.value}`);
+  document.querySelector('#valueAlert').addEventListener('selectedOption', (evt) => {
+    console.warn('Value selected:', evt.target.optionSelected.value);
+    alert(`Value selected: ${evt.target.optionSelected.value}`);
   });
 }, 500);
diff --git a/demo/apiExamples.md b/demo/apiExamples.md
@@ -14,12 +14,13 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Properties
 
-| Property      | Attribute     | Type      | Default                | Description                                      |
-|---------------|---------------|-----------|------------------------|--------------------------------------------------|
-| [disabled](#disabled)    | `disabled`    | `Boolean` |                        | When attribute is present element shows disabled state. |
-| [error](#error)       | `error`       | `Boolean` |                        | When attribute is present element shows error state. |
-| [placeholder](#placeholder) | `placeholder` | `String`  | "Please select option" | Define placeholder text to display before a value is manually selected. |
-| [value](#value)       | `value`       | `String`  |                        | Value selected for the dropdown menu.            |
+| Property         | Attribute        | Type      | Default                | Description                                      |
+|------------------|------------------|-----------|------------------------|--------------------------------------------------|
+| [disabled](#disabled)       | `disabled`       | `Boolean` |                        | When attribute is present element shows disabled state. |
+| [error](#error)          | `error`          | `Boolean` |                        | When attribute is present element shows error state. |
+| [optionSelected](#optionSelected) | `optionSelected` | `Object`  | "undefined"            | Specifies the current selected menuOption.       |
+| [placeholder](#placeholder)    | `placeholder`    | `String`  | "Please select option" | Define placeholder text to display before a value is manually selected. |
+| [value](#value)          | `value`          | `String`  |                        | Value selected for the dropdown menu.            |
 
 ## Slots
 
@@ -390,11 +391,11 @@ The following example illustrates how a user may query the `.value` of the `auro
  * @param {string} Selector for auro-select to retrieve the value from.
  */
 const getValue = (selector) => {
-  const menu = document.querySelector(`${selector} auro-menu`);
+  const select = document.querySelector(`${selector}`);
 
-  if (menu.optionSelected) {
-    console.warn('Value selected:', menu.optionSelected.value);
-    alert(`Value selected: ${menu.optionSelected.value}`);
+  if (select.optionSelected) {
+    console.warn('Value selected:', select.optionSelected.value);
+    alert(`Value selected: ${select.optionSelected.value}`);
   } else {
     console.warn('Value selected:', null);
     alert(`Value selected: ${null}`);
@@ -447,10 +448,9 @@ The following example listens for the `selectOption` custom event from the `<aur
 
 ```js
 setTimeout(() => {
-  document.querySelector('#valueAlert').addEventListener('selectedOption', () => {
-    const menu = document.querySelector('#valueAlert auro-menu');
-    console.warn('Value selected:', menu.optionSelected.value);
-    alert(`Value selected: ${menu.optionSelected.value}`);
+  document.querySelector('#valueAlert').addEventListener('selectedOption', (evt) => {
+    console.warn('Value selected:', evt.target.optionSelected.value);
+    alert(`Value selected: ${evt.target.optionSelected.value}`);
   });
 }, 500);
 ```

diff --git a/demo/extractValue.js b/demo/extractValue.js
@@ -2,11 +2,11 @@
  * @param {string} Selector for auro-select to retrieve the value from.
  */
 const getValue = (selector) => {
-  const menu = document.querySelector(`${selector} auro-menu`);
+  const select = document.querySelector(`${selector}`);
 
-  if (menu.optionSelected) {
-    console.warn('Value selected:', menu.optionSelected.value);
-    alert(`Value selected: ${menu.optionSelected.value}`);
+  if (select.optionSelected) {
+    console.warn('Value selected:', select.optionSelected.value);
+    alert(`Value selected: ${select.optionSelected.value}`);
   } else {
     console.warn('Value selected:', null);
     alert(`Value selected: ${null}`);

diff --git a/docs/api.md b/docs/api.md
@@ -4,12 +4,13 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Properties
 
-| Property      | Attribute     | Type      | Default                | Description                                      |
-|---------------|---------------|-----------|------------------------|--------------------------------------------------|
-| `disabled`    | `disabled`    | `Boolean` |                        | When attribute is present element shows disabled state. |
-| `error`       | `error`       | `Boolean` |                        | When attribute is present element shows error state. |
-| `placeholder` | `placeholder` | `String`  | "Please select option" | Define placeholder text to display before a value is manually selected. |
-| `value`       | `value`       | `String`  |                        | Value selected for the dropdown menu.            |
+| Property         | Attribute        | Type      | Default                | Description                                      |
+|------------------|------------------|-----------|------------------------|--------------------------------------------------|
+| `disabled`       | `disabled`       | `Boolean` |                        | When attribute is present element shows disabled state. |
+| `error`          | `error`          | `Boolean` |                        | When attribute is present element shows error state. |
+| `optionSelected` | `optionSelected` | `Object`  | "undefined"            | Specifies the current selected menuOption.       |
+| `placeholder`    | `placeholder`    | `String`  | "Please select option" | Define placeholder text to display before a value is manually selected. |
+| `value`          | `value`          | `String`  |                        | Value selected for the dropdown menu.            |
 
 ## Slots
 

diff --git a/src/auro-select.js b/src/auro-select.js
@@ -24,6 +24,7 @@ import styleCssFixed from './style-fixed-css.js';
  * @prop {String} value - Value selected for the dropdown menu.
  * @prop {Boolean} error - When attribute is present element shows error state.
  * @prop {Boolean} disabled - When attribute is present element shows disabled state.
+ * @attr {Object} optionSelected - Specifies the current selected menuOption.
  * @slot - Default slot for the menu content.
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -36,6 +37,7 @@ class AuroSelect extends LitElement {
 
     this.placeholder = 'Please select option';
     this.items = Array.from(this.querySelectorAll('auro-menuoption'));
+    this.optionSelected = undefined;
   }
 
   // This function is to define props used within the scope of this component
@@ -49,6 +51,9 @@ class AuroSelect extends LitElement {
        */
       items: { type: Array },
 
+      optionSelected: {
+        type: Object
+      },
       value: {
         type: String,
         reflect: true
@@ -128,6 +133,7 @@ class AuroSelect extends LitElement {
     this.addEventListener('selectedOption', (evt) => {
       this.displayValue = evt.target.optionSelected.innerText;
       this.value = evt.target.optionSelected.value;
+      this.optionSelected = evt.target.optionSelected;
 
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();