0

I have a bit of a tricky one that I hope is something I'm overlooking.

Background info:

  • LWC to assign various permissions with comment and dropdown for change type (this works fine)
  • modal pops up to show the changes and allow user to double check their changes (this works fine)

Relevant screenshots...

Perm Selector: enter image description here

Perm Modal showing required values missing: enter image description here

Issue:

  • when the changeComment and changeReason are passed into the modal, slds-has-error class displays appropriately based on whether the variable is populated. This is correct.
  • when Save is pressed, changeReason dropdown shows the appropriate error, changeComment lightning-input box does not. This occurs whether changeReason is populated or not.

Relevant screenshots...

Post-save when neither is selected: enter image description here

Pre-save when changeReason is selected: enter image description here

Post-save when changeReason is selected: enter image description here

Relevant chunks of code...

html:

            <div class="slds-grid slds-gutters slds-p-around_medium">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-combobox
                        label="Reason for Change"
                        placeholder="Select Reason for Change..."
                        value={changeReason}
                        options={options}
                        class={reasonPopulatedClass}
                        required
                        disabled
                    ></lightning-combobox>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input
                        data-id="change-comment"
                        type="text"
                        value={changeComment}
                        label="Describe Reason for Change..."
                        class={commentPopulatedClass}
                        required
                        disabled
                    ></lightning-input>
                </div>
            </div>

js:

                if(!this.changeReason) {
                    const reasonForChange = this.template.querySelector('lightning-combobox');
                    reasonForChange.setCustomValidity('Please return to the previous page and select a reason for the selected change.');
                    reasonForChange.reportValidity();    
                }
                if(this.changeComment == '') {
                    const commentForChange = this.template.querySelector('lightning-input[data-id="change-comment"]');
                    console.log(commentForChange.value);
                    console.log(commentForChange.validity);
                    commentForChange.setCustomValidity('Please return to the previous page and select a reason for the selected change.');
                    commentForChange.reportValidity();
                }

Note on the console logs:

  • commentForChange.value and commentForChange.validity both show values (empty string and 'true', respectively), although the 'true' is not accurate as it's an empty string, and it is a required field. I've also tried setting a minimum char length to no avail.
  • I had to play around with my selector for the changeComment lightning-input box, as it wasn't playing nice, but the value and validity properties illustrate that it is selecting the appropriate DOM element.
  • right now the setCustomValidity functions are copy-paste of each other to make sure I'm not catching myself with a missed capitalization.

Important note for the reasoning behind this structure:

  • unable to use events in modal due to being unable to enable Lightning Web Security due to organization security requirements (lots of testing needed before we can turn it on, not worth it for one LWC at this juncture).

Ask: I've seen rumblings of this not working well for lightning-input on SE and SO, but hoping another set of eyes might see something I'm not. Any ideas?

Improve this question

1 Answer 1

Reset to default
0

Well, annoying, but figured out an answer after much googling and experimentation: the lightning-combobox can be required and disabled, but the lightning-input can be required, but not disabled or read-only. Handling with an onchange that prevents the end user from changing the comment in the modal.

Neither field filled out: neither field filled out

Relevant code:

html

            <div class="slds-grid slds-gutters slds-p-around_medium">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-combobox
                        label="Reason for Change"
                        placeholder="Select Reason for Change..."
                        value={changeReason}
                        options={options}
                        class={reasonPopulatedClass}
                        required
                        disabled
                    ></lightning-combobox>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input
                        data-id="change-comment"
                        type="text"
                        value={changeComment}
                        max-length="0"
                        label="Describe Reason for Change..."
                        class={commentPopulatedClass}
                        onchange={handleInputChange}
                        required
                    ></lightning-input>
                </div>
            </div>

js

                if(!this.changeReason) {
                    let reasonForChange = this.template.querySelector('lightning-combobox');
                    reasonForChange.setCustomValidity('Please return to the previous page and select a reason for the selected change.');
                    reasonForChange.reportValidity();    
                }
                if(!this.changeComment) {
                    let commentForChange = this.template.querySelector('lightning-input[data-id="change-comment"]');
                    commentForChange.setCustomValidity('Please return to the previous page and enter a comment for the selected change.');
                    commentForChange.reportValidity();
                }

handleInputChange function to lock down field:

    handleInputChange() {
        this.template.querySelector('lightning-input[data-id="change-comment"]').value = this.changeComment;
    }
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.