1

I created an LWC component with lightning-radio-group and added it to the Lightning App, it only shows which value is selected by the user.

As I selected value and move the back and forth on the tabs of the same application and when I came back to the LWC component tab, it shows the same selected value.

The tab should refresh.

I am also attaching a video with this issue.

Video Link:- https://www.loom.com/share/38563c06b3e244158b7fce8b257ac52a

CODE

HTML

<template>
    <lightning-card title="Radio Group in LWC">
        <div style="margin-left:3%;">
            <lightning-radio-group label="Account Type" 
                                    name="radioButtonGroup" 
                                    onchange={handleChange} 
                                    options={options}
                                    value={selectedValue}
                                    type="radio"></lightning-radio-group>
        
            <br/>
            <div if:true={selectedValue}>
                Selected Value: <b>{selectedValue}</b>
            </div>
        </div>

    </lightning-card>
</template>

JS

import { LightningElement, wire, track} from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import Type_FIELD from '@salesforce/schema/Account.Type';

export default class RadioButtonsInLWC extends LightningElement {
    @track selectedValue;
    @track options = [];

    // object info using wire service
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    // Getting Account Type Picklist values using wire service
    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Type_FIELD})
    typePicklistValues({error, data}) {
        if(data) {
            let optionsValues = [];
            for(let i = 0; i < data.values.length; i++) {
                optionsValues.push({
                    label: data.values[i].label,
                    value: data.values[i].value
                })
            }
            this.options = optionsValues;
            window.console.log('optionsValues ===> '+JSON.stringify(optionsValues));
        }
        else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }
    }

    // handle the selected value
    handleChange(event) {
        this.selectedValue = event.detail.value;
    }
}
2
  • How do you set the values of your radio group? can share some code?
    – Klecool
    Jul 27 '20 at 6:44
  • use this line to refresh lwc page. eval("$A.get('e.force:refreshView').fire();");
    – Asif
    Mar 19 at 12:56
0

I believe this won't happen automatically in LWC, you should capture event and add some code to react to that event (perform actions that you would want to see). Here is the doc describing the events available in LWC: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_events

Maybe try with onhashchange event.

Not the answer you're looking for? Browse other questions tagged or ask your own question.