Assign custom attributes to generated hidden field

[Andrew]

Hi,

I am using Ruby on Rails to render my selects and there are quite a few situations where I want to add some extra attributes onto the select field to trigger certain events,  using either Stimulus or Alpine JS.

For example,

< div class="" data-controller="dropdown" data-dropdown-collection-value="JSON">

< div x-model="approver" class="" data-dropdown-target="input" id="leave_type_policy_leave_type_policy_approvals_attributes_NEW_RECORD_approver" name="leave_type_policy[leave_type_policy_approvals_attributes][NEW_RECORD][approver]">

This renders the dropdown fine, however the x-model attribute, I want to be on the hidden field not the visible select.  Below is the generated markup, and would like these 'extra' attributes to be assigned to the hidden input instead.   Is there a way to make this possible?

[Sevvandhi Nagulan]

Hi Andrew, 

Greetings from Syncfusion support. 

We checked your query. You can add the custom attributes to hidden element using setAttribute javascript method. Please refer the below code. 

created: function(e) { 

  this.hiddenElement.setAttribute("x-model", "approver"); 

} 

Please find the sample below. 

Sample link: https://stackblitz.com/edit/8hfxje-xpdpjd?file=index.js 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Andrew]

Hi Sevvandhi,

Thanks for your suggestion. yes that could work, but it would mean I also have to remove it from the other element, and set rules for every type of attribute to move them to the hidden element.

Is there a way to have Syncfusion use extra attributes always the hidden element?

[Sevvandhi Nagulan]

Hi Andrew, 

We checked your query. You can remove the attribute using JavaScript removeAttribute method. Please refer the below code. 

    created: function(e) 

    { 

        this.hiddenElement.setAttribute("x-model", "approver"); 

        document.getElementById("leave_type_policy_leave_type_policy_").removeAttribute("x-model"); 

    } 

As we suggested you can add the custom attributes using setAttribute method. Please refer the below sample link. 

Sample link: https://stackblitz.com/edit/8hfxje-jf9xtq?file=index.js 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N