1

I have a functionality where I need to add a modal on click of a radio button.

My code is as below

selectRadio.html

<template>

<lightning-card title="New Investment Breakdown"><br/>
    <div style="margin-left:3%;">
        <template for:each={swicthAmountOptions} for:item="item">
            <fieldset key={item.value} style="display: block; float: left;">
                <div class="slds-form-element__control">
                    <span class="slds-radio">
                        <input name="radiogroup" id={item.value} type="radio" value={item.value} onchange={openModal} />
                        <label class="slds-radio__label" for={item.value}>
                            <span class="slds-radio_faux"></span>
                            <span class="slds-form-element__label">{item.label}</span>
                        </label>
                    </span>
                </div>
            </fieldset>
        </template><br/><br/>
    </div>

</lightning-card>

  
  <template if:true={isModalOpen}>
    <!-- Modal/Popup Box LWC starts here -->
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <!-- Modal/Popup Box LWC header here -->
            <header class="slds-modal__header">
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal/PopUp Box header LWC</h2>
            </header>
            <!-- Modal/Popup Box LWC body starts here -->
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <p><b>Modals/Popup Box are used to display content in a layer above the app.
                </b></p>
                <p><b>This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.
                </b></p>
            </div>
            <!-- Modal/Popup Box LWC footer starts here -->
            <footer class="slds-modal__footer">
                <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                <button class="slds-button slds-button_brand" onclick={submitDetails} title="OK">OK</button>
            </footer>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</template>

selectRadio.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
@track switchAmountType = '';
@track data = [];
@track columns = [];
@track isModalOpen = false;


rowOffset = 0;
switchAmountType = '';

// eslint-disable-next-line @lwc/lwc/no-async-await
async connectedCallback() {

    this.columns = [
        { label: 'FUND NAME', fieldName: 'FundName', editable: false },
        { label: 'NEW BALANCE', fieldName: 'Amount', type: 'currency', editable: true },
        { label: 'NEW BALANCE', fieldName: 'Percent', type: 'currency', editable: true }
    ];
    this.data =[
        {fundName: 'ABC', amount:100, percent:''},
        {fundName: 'XYZ', amount:'',percent:''}
    ];
    //this.data = await getFunds();
}


renderedCallback() {

    Array.from(this.template.querySelectorAll('input[name="radiogroup"]')
    .forEach(element => {
        if(element.value === 'Percentage'){
            element.checked = true;
        }
    }));

}

get swicthAmountOptions() {
    return [
        { label: 'Percentage', value: 'Percentage', checked : true },
        { label: 'Amount', value: 'Amount', checked : false },
    ];
}

openModal() {
    // to open modal set isModalOpen tarck value as true
    this.isModalOpen = true;
}
closeModal() {
    // to close modal set isModalOpen tarck value as false
    this.isModalOpen = false;
}
submitDetails() {
    // to close modal set isModalOpen tarck value as false
    //Add your code to call apex method or do some processing
    this.isModalOpen = false;
  }
 }

The radio buttons appear as expected and the modal popup appears as expected as well. But when I click 'Ok' on the modal, the newly checked radio does not appear as checked.

What may I be doing wrong?

1 Answer 1

1

There are a couple of issues in your code,

  1. You have an assignment in renderedCallback causing unnecessary overrides each time the template is re-rendered by a reactivity change.
  2. You do not have proper data binding in place. Use @track so that we can achieve reactivity.

Let's simplify your code and avoid using querySelector and use data-binding to keep it simple

Below is the JavaScript controller code. Notice all I did was had @track for the options and also I made some logical changes

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {

@track data = [];
@track columns = [];
@track isModalOpen = false;
@track switchOptions = [
    { label: 'Percentage', value: 'Percentage', checked : true },
    { label: 'Amount', value: 'Amount', checked : false },
     { label: 'ZYZ', value: 'ZYZ', checked : false },
];


rowOffset = 0;
@track
selectedValue;

constructor() {
   super();
   this.selectedValue = 'Percentage';
 }

 // eslint-disable-next-line @lwc/lwc/no-async-await
 async connectedCallback() {

 this.columns = [
    { label: 'FUND NAME', fieldName: 'FundName', editable: false },
    { label: 'NEW BALANCE', fieldName: 'Amount', type: 'currency', editable: true },
    { label: 'NEW BALANCE', fieldName: 'Percent', type: 'currency', editable: true }
];
this.data =[
    {fundName: 'ABC', amount:100, percent:''},
    {fundName: 'XYZ', amount:'',percent:''}
  ];
   //this.data = await getFunds();
}


 openModal(event) {
 // to open modal set isModalOpen tarck value as true
 this.selectedValue = event.target.value;
 this.isModalOpen = true;
}

 closeModal() {
 // to close modal set isModalOpen tarck value as false
  this.isModalOpen = false;
 }

submitDetails() {
 // to close modal set isModalOpen tarck value as false
 //Add your code to call apex method or do some processing
 this.isModalOpen = false;
 this.switchOptions.forEach(option => option.checked = option.value === this.selectedValue);    
  }

 }

I did change 1 line in your HTML code

<input name="radiogroup" id={item.value} data-id={item.value} type="radio" value={item.value} onchange={openModal} checked={item.checked} />

Check everything in action here

1
  • 1
    Thanks a lot mate. It helped me a lot. Well explained with an example. I was able to understand the issue and work it out. Commented Jan 30, 2021 at 5:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .