Attach point on custom widget gets removed after rendering


#1

I have a custom widget that contains a textArea. I need to access directly the textArea so I can call resize() function. I placed an attach point on the text area to make it easier to access it from code like this

 <div data-dojo-attach-point="formelement" style="position:absolute" tabindex="0" class="fe-label aimwebforms-resizehandle" >
    
     <textarea  data-dojo-attach-point="theShape"
               data-dojo-type="dijit/form/Textarea"
               data-dojo-props="trim:false,  style:'background: transparent; border:none;'" readonly class="fe-element" ></textarea>
 </div>

However when the widget gets rendered on the page, the textArea looks like

<div data-dojo-attach-point="formelement" style="position: absolute; left: 156px; top: 193px; width: 42px; border-style: none; border-width: 1px; border-color: black;" tabindex="0" class="fe-label aimwebforms-resizehandle" id="01ef6397-0d0a-4f0a-8c02-c28ed20770b2" widgetid="uniqName_43_2">
    
    <textarea data-dojo-attach-point="focusNode,containerNode,textbox" autocomplete="off" class="dijitTextBox dijitTextArea dijitExpandingTextArea fe-element dijitTextBoxReadOnly dijitTextAreaReadOnly dijitExpandingTextAreaReadOnly dijitReadOnly" tabindex="0" id="dijit_form_Textarea_2" readonly="" widgetid="dijit_form_Textarea_2" value="" rows="1" style="overflow-y: hidden; overflow-x: auto; box-sizing: border-box; background: transparent; border: none; font-family: Arial; font-size: 20px; font-weight: 400; font-style: normal; color: black; text-decoration: none; text-align: left;"></textarea>

<div class="aimwebforms-resizehandle" style="visibility: hidden;"><span class="disableMove aimwebforms-resizehandle-right"></span></div></div>

My single attach point

data-dojo-attach-point=“theShape”

gets removed and replaced with

data-dojo-attach-point=“focusNode,containerNode,textbox”

This appears to be a bug, existing attach points should not be deleted or replaced, but rather appended to if any already exist.

EDIT: although after using the widget it appears I’m still able to access the attach point I set ‘theShape’ even though it is not visible in the HTML. Is this correct?


#2

Yes this is correct.You will not see your attach point in the HTML.
This is not a bug.


#3

There are ways to retain the attach point, either a mixture of making sure the parent widget includes the dijit/_WidgetsInTemplateMixin, using dijit/_AttachMixin if you want the markup within your HTML page to actual be the template for a widget, and/or leveraging the containerNode attach point to preserve the original markup in your HTML page.

What would help is to know if the provided markup is part of the HTML document or your widget template. If the latter, my guess is that you forgot to include dijit/_WidgetsInTemplateMixin in your list of dependencies for your widget.


#4

Ok that’s good to know.

To answer your questions, the HTML markup is part of the widget template. I did include dijit/_WidgetsInTemplateMixin - not inside that widget itself, it gets inherited from another widget I created as a sort of base class.

Regardless, as long as we can still refer to the attach point as it was defined in the HTML, then its all good.