From b458deb41520a441a078e089af8ca8f7f6962efa Mon Sep 17 00:00:00 2001 From: Nida Ghuman Date: Thu, 25 Jul 2024 14:52:09 -0400 Subject: [PATCH] [PBNTR-405] Dropdown Kit in Rails Form Fixes (#3536) **What does this PR do?** A clear and concise description with your runway ticket url. [Runway Story](https://runway.powerhrg.com/backlog_items/PBNTR-405) **Screenshots:** **How to test?** Steps to confirm the desired behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See addition/change --- .../playbook/pb_dropdown/dropdown.html.erb | 10 ++- .../pb_kits/playbook/pb_dropdown/dropdown.rb | 2 +- .../app/pb_kits/playbook/pb_dropdown/index.js | 68 ++++++++++--------- 3 files changed, 45 insertions(+), 35 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb index fc2a261045..5b5a8324d7 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb @@ -8,9 +8,13 @@ <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %> <% end %>
- - /> - + + /> <% if content.present? %> <%= content.presence %> <%= pb_rails("body", props: { status: "negative", text: object.error }) %> diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb index d390b7e015..4f839b17f0 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb +++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb @@ -29,7 +29,7 @@ def error_class end def input_default_value - default_value.present? ? default_value.transform_keys(&:to_s) : "" + default_value.present? ? default_value.transform_keys(&:to_s)["id"] : "" end def options_with_blank diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/index.js b/playbook/app/pb_kits/playbook/pb_dropdown/index.js index 42219cda92..1a639d27c4 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/index.js +++ b/playbook/app/pb_kits/playbook/pb_dropdown/index.js @@ -8,9 +8,9 @@ const DOWN_ARROW_SELECTOR = "#dropdown_open_icon"; const UP_ARROW_SELECTOR = "#dropdown_close_icon"; const OPTION_SELECTOR = "[data-dropdown-option-label]"; const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]"; -const INPUT_FORM_VALIDATION = "#dropdown-form-validation"; const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display"; const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]"; +const DROPDOWN_INPUT = "#dropdown-selected-option"; export default class PbDropdown extends PbEnhancedElement { static get selector() { @@ -47,14 +47,13 @@ export default class PbDropdown extends PbEnhancedElement { handleOptionClick(event) { const option = event.target.closest(OPTION_SELECTOR); - const hiddenInput = this.element.querySelector("#dropdown-selected-option"); - const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION); + const hiddenInput = this.element.querySelector(DROPDOWN_INPUT); if (option) { const value = option.dataset.dropdownOptionLabel; hiddenInput.value = JSON.parse(value).id; - inputFormValidation.value = JSON.parse(value).id; - this.clearFormValidation(inputFormValidation); + this.clearFormValidation(hiddenInput); + this.onOptionSelected(value, option); } } @@ -160,14 +159,18 @@ export default class PbDropdown extends PbEnhancedElement { } handleFormValidation() { - const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION); - - inputFormValidation.addEventListener("invalid", function (event) { - if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") { - event.preventDefault(); - inputFormValidation.closest(".dropdown_wrapper").classList.add("error"); - } - }, true); + const hiddenInput = this.element.querySelector(DROPDOWN_INPUT); + + hiddenInput.addEventListener( + "invalid", + function (event) { + if (hiddenInput.hasAttribute("required") && hiddenInput.value === "") { + event.preventDefault(); + hiddenInput.closest(".dropdown_wrapper").classList.add("error"); + } + }, + true + ); } clearFormValidation(input) { @@ -175,7 +178,9 @@ export default class PbDropdown extends PbEnhancedElement { const dropdownWrapperElement = input.closest(".dropdown_wrapper"); dropdownWrapperElement.classList.remove("error"); - const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative"); + const errorLabelElement = dropdownWrapperElement.querySelector( + ".pb_body_kit_negative" + ); if (errorLabelElement) { errorLabelElement.remove(); } @@ -183,23 +188,22 @@ export default class PbDropdown extends PbEnhancedElement { } setDefaultValue() { - const hiddenInput = this.element.querySelector("#dropdown-selected-option"); + const hiddenInput = this.element.querySelector(DROPDOWN_INPUT); + const options = this.element.querySelectorAll(OPTION_SELECTOR); - if (hiddenInput.value) { - const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION); - const defaultValue = JSON.parse(hiddenInput.value.replaceAll("=>", ":")); - const options = this.element.querySelectorAll(OPTION_SELECTOR); + const defaultValue = hiddenInput.dataset.defaultValue || ""; + hiddenInput.value = defaultValue; - options.forEach((option) => { - if (defaultValue.id === JSON.parse(option.dataset.dropdownOptionLabel).id) { - option.classList.add("pb_dropdown_option_selected"); - } + if (defaultValue) { + const selectedOption = Array.from(options).find((option) => { + return ( + JSON.parse(option.dataset.dropdownOptionLabel).id === defaultValue + ); }); - - this.setTriggerElementText(defaultValue.label); - - hiddenInput.value = defaultValue.id; - inputFormValidation.value = defaultValue.id; + selectedOption.classList.add("pb_dropdown_option_selected"); + this.setTriggerElementText( + JSON.parse(selectedOption.dataset.dropdownOptionLabel).label + ); } } @@ -214,11 +218,13 @@ export default class PbDropdown extends PbEnhancedElement { } resetDropdownValue() { - const hiddenInput = this.element.querySelector("#dropdown-selected-option"); - const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION); + const hiddenInput = this.element.querySelector(DROPDOWN_INPUT); + const options = this.element.querySelectorAll(OPTION_SELECTOR); + options.forEach((option) => { + option.classList.remove("pb_dropdown_option_selected"); + }); hiddenInput.value = ""; - inputFormValidation.value = ""; const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER); this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);