We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Failed to execute 'closest' on 'Element': '.' is not a valid selector

<td class="e-textlabel">Capacity</td>
<td colspan="2"> <input type = "text" id="classCapacity" class="e-field" name="classCapacity"/></td>

onPopupOpen(args: PopupOpenEventArgs): void {
if (args.type === 'Editor') {
let classCapacityElement: HTMLInputElement = args.element.querySelector('#classCapacity') ;
if (!classCapacityElement.classList.contains('e-numerictextbox')) {
let classCapacityObject: NumericTextBox = new NumericTextBox({placeholder:'',value:23});

I am getting an error that reads "Failed to execute 'closest' on 'Element': '.' is not a valid selector." when I try to close the editor window. The numeric text box works, but I am not able to close or save the editor window, as it is throwing that error. 

9 Replies

BS Balasubramanian Sattanathan Syncfusion Team November 11, 2019 07:44 AM

Hi Jose Lara, 

Greetings from Syncfusion Support. 

We have prepared sample based on your requirement.  


Kindly try the above sample and let us know if you need any further assistance on this.

Balasubramanian S 

JL jose lara November 11, 2019 11:26 AM

Hi, although this works, I have a follow up question. In your example, you are dynamically creating  it in the controller and placing it as the first element on the form.  How can I position the numeric text box in a desired location within the popup? For example, if I want this to appear specifically after the first two elements, how can I specify that? 

VD Vinitha Devi Murugan Syncfusion Team November 12, 2019 06:42 AM

Hi Jose, 
Syncfusion Greetings. 
You can place the custom field wherever you want in the editor. We have prepared the sample below to append the custom field before the allDay row. Please refer it. 
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-all-day-time-zone-row')); 
M.Vinitha devi  

JL jose lara November 12, 2019 11:35 PM

I tried to add an element before recurrence editor. But I am getting this error - ERROR DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />


let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (startElement){
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);

if (!args.element.querySelector('.custom-field-row1')) {
let row: HTMLElement = createElement('div', { className: 'custom-field-row1' });
let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, args.element.querySelector('#StartTime'));
let container: HTMLElement = createElement('div', { className: 'custom-field-container1' });
let inputEle: HTMLInputElement = createElement('input', {
className: 'e-field', attrs: { id:'capacity' }
}) as HTMLInputElement;
let inputobj: NumericTextBox = new NumericTextBox({value:22, placeholder: 'Class' ,format:'### person(s)'});
inputEle.setAttribute('name', 'classCapacity');

VD Vinitha Devi Murugan Syncfusion Team November 13, 2019 06:12 AM

Hi Jose, 
Thanks for your update. 
Kindly use below code to append the numeric text box field before the recurrence editor. 
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-time-zone-row')); 
Kindly try the sample and if the issue persists, try to reproduce the error in a sample and revert else share your code example/runnable sample (if possible) to serve you better.  
M.Vinitha devi 

JB Jeff Butterworth February 15, 2021 11:29 PM

For anyone else who stumbles across this well trying to fix the "Failed to execute closed on element" error, the bit of magic required to fix the issue seems to be to make sure to make sure to call setAttribute again after you have created the new element EVEN IF YOU HAVE THE NAME ATTRIBUTE SET ON THE ORIGINAL ELEMENT!

     let durationEl = args.element.querySelector("#qiEstDuration");
     if (!durationEl.classList.contains("e-numerictextbox")) {
          let durationTextBox = new ej.inputs.NumericTextBox({ value: args.data.EstDuration }, durationEl);
    durationEl.setAttribute('name', 'EstDuration');   <------- THIS BIT IS WHAT FIXED THE PROBLEM FOR ME

NR Nevitha Ravi Syncfusion Team February 17, 2021 01:50 AM

Hi Jeff, 

Greetings from Syncfusion Support. 

Yes you have to set the attribute name/data-name to the element to resolve the script error, please get back to us if you need any further assistance. 


MR Matthew Roberts December 6, 2022 06:03 PM

How would you do this on a functional component?

RM Ruksar Moosa Sait Syncfusion Team December 8, 2022 01:54 AM

Hi Matthew,

We have prepared a sample to add Numeric textbox field before the recurrence editor in react using functional components.

Sample: https://stackblitz.com/edit/react-5st55r?file=index.js



Ruksar Moosa Sait

Live Chat Icon For mobile
Up arrow icon