0

I have using v40.0:

VF Page

<apex:page id="myTestPage" showHeader="false" sideBar="false" standardStylesheets="false">


    <apex:includeLightning/>
    <apex:slds />


    <script>

        $Lightning.use("c:myTestApp", function () {
            $Lightning.createComponent(
                    "c:myTestComp",
                    {},
                    "component_content",
                    function (cmp) {
                        var loadingDivElt = document.getElementById("loader");
                        loadingDivElt.style.display = 'none';
                    });
        });

    </script>

    <div class="slds-scoped">
        <div id="loader" class="slds-grid slds-grid--frame">
            <div class="slds-spinner_container">
                <div class="slds-spinner slds-spinner--brand slds-spinner--large" role="alert">
                    <span class="slds-assistive-text">Loading</span>
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="component_content">
    </div>
</apex:page>

Lightning App

<aura:application description="myTestApp" extends="ltng:outApp">
    <aura:dependency resource="c:myTestComp"/>
</aura:application>

Lightning Component

<aura:component description="myTestComp">
    <div class="slds-grid" >
        <div class="slds-grid">
            <div class="slds-size_1-of-1">
                <lightning:button label="Show modal" onclick="{!c.showSupportModal}" variant="brand"/>
            </div>
        </div>
        <!-- Support Case Modal -->
        <div class="submit-case">
            <section aura:id="submit-case-modal" role="dialog" tabindex="-1" aria-labelledby="submit-case-heading-01"
                     aria-modal="true"
                     aria-describedby="submit-case-content-id-1" class="slds-modal">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                                onclick="{!c.hideSupportModal}"
                                title="Close">
                            <lightning:icon iconName="utility:close" variant="bare" size="medium"/>
                        </button>

                        <h2 id="submit-case-heading-01" class="slds-text-heading_medium slds-hyphenate">
                            Contact Support
                        </h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="submit-case-content-id-1">
                        <ui:inputRichText label="Enter something" placeholder="Enter your comments" aura:id="rich-text"/>
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" onclick="{!c.hideSupportModal}">Cancel</button>
                        <button class="slds-button slds-button_brand">Send</button>
                    </footer>
                </div>
            </section>
            <div aura:id="modal-background" class="slds-backdrop"></div>
        </div>
    </div>

</aura:component>

Lightning Controller

({
    showSupportModal: function(component,event,helper){
        document.body.style.overflow = 'hidden';
        $A.util.addClass(component.find("submit-case-modal"),"slds-fade-in-open");
        $A.util.addClass(component.find("modal-background"),"slds-backdrop_open");
    },
    hideSupportModal: function(component,event,helper){
        document.body.style.overflow = null;
        component.find("rich-text").set("v.value","");
        $A.util.removeClass(component.find("submit-case-modal"),"slds-fade-in-open");
        $A.util.removeClass(component.find("modal-background"),"slds-backdrop_open");


    }

})

It seems to work the first time the modal is opened and closed but not the second time.

  1. Open VF page
  2. Click button
  3. Modal opens

First time Modal Opens

  1. Enter some text

Text entered

  1. Close Modal by clicking cancel or the X
  2. Click button to open modal again - Entered text is gone as expected

Second open - Text Gone as expected

  1. Enter text again

enter image description here

  1. Close by cancel or the X and reopen and the text remains and is not cleared

I tied using a value="{!v.anAttribute}" and setting the value of that attribute to "" in the controller with the same results.

Basically I need to clear the text from the Rich Text Input if they close the modal by the X or cancel button.

I tried to use a <lightning:inputRichText> in place of the UI version but got the following error

This page has an error. You might just need to refresh it. Assertion Failed!: Failed to find definition for dependency: lightning-icon : undefined Failing descriptor: {lightning:inputRichText}

So the question is: How to you reliably clear the value of a rich text input every time

1

This answer works BUT the component is FUBAR You cannot access the text entered into richText and it does not update any value provide bound to it. So event though I was able to pseudo clear it, when I actually needed the value of the text entered it was always undefined. WTH.....

I have resorted to dynamically creating and destroying the component. Still hope someone has a way to get it to clear the value every time by using a simply <ui:inputRichText> component instead of having to doo al of this just to clear the value.

here is final component and controller. Had to add spinner to account for the noticeable delay in creating the component

Lightning Component

<aura:component description="myTestComp">
    <div class="slds-grid" >
        <div class="slds-grid">
            <div class="slds-size_1-of-1">
                <lightning:button label="Show modal" onclick="{!c.showSupportModal}" variant="brand"/>
            </div>
        </div>
        <!-- Support Case Modal -->
        <div class="submit-case">
            <section aura:id="submit-case-modal" role="dialog" tabindex="-1" aria-labelledby="submit-case-heading-01"
                     aria-modal="true"
                     aria-describedby="submit-case-content-id-1" class="slds-modal">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                                onclick="{!c.hideSupportModal}"
                                title="Close">
                            <lightning:icon iconName="utility:close" variant="bare" size="medium"/>
                        </button>

                        <h2 id="submit-case-heading-01" class="slds-text-heading_medium slds-hyphenate">
                            Contact Support
                        </h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium slds-is-relative" id="submit-case-content-id-1">
                         <lightning:spinner aura:id="modal-spinner" variant="brand" size="medium" class="slds-hide"/>
                        //other stuff here
                        <div aura:id="rich-text">{!v.body}</div>
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" onclick="{!c.hideSupportModal}">Cancel</button>
                        <button class="slds-button slds-button_brand">Send</button>
                    </footer>
                </div>
            </section>
            <div aura:id="modal-background" class="slds-backdrop"></div>
        </div>
    </div>

</aura:component>

Lightning Controller

({
    showSupportModal: function(component,event,helper){
        document.body.style.overflow = 'hidden';

        $A.util.removeClass(component.find("modal-spinner"),'slds-hide');
        helper.createRichText(component,event,helper);

        $A.util.addClass(component.find("submit-case-modal"),"slds-fade-in-open");
        $A.util.addClass(component.find("modal-background"),"slds-backdrop_open");
    },
    hideSupportModal: function(component,event,helper){
        document.body.style.overflow = null;
        component.find("rich-text-input").set("v.body",[]);
        $A.util.removeClass(component.find("submit-case-modal"),"slds-fade-in-open");
        $A.util.removeClass(component.find("modal-background"),"slds-backdrop_open");


    }

})

Lightning Helper

createRichText: function(component,event,helper){
    $A.createComponent(
        "ui:inputRichText",
        {
            "aura:id": "support-comments",
            "placeholder": "Enter comments/questions here"
        },
        function(commentsInput, status, errorMessage){
            //Add the comments to the div
            if (status === "SUCCESS") {
                var ele = component.find("rich-text-input");
                var body = ele.get("v.body");
                body.push(commentsInput);
                ele.set("v.body", body);
            }
            else if (status === "INCOMPLETE") {
                console.log("No response from server or client is offline.")
                // Show offline error
            }
            else if (status === "ERROR") {
                console.log("Error: " + errorMessage);
                // Show error message
            }
            $A.util.addClass(component.find("modal-spinner"),'slds-hide');
        }
    );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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