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

[jose lara]

HTML

<tr>

<td class="e-textlabel">Capacity</td>

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

</tr>

TS

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});

classCapacityObject.appendTo(classCapacityElement)

}

}

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. 

[Balasubramanian Sattanathan]

Hi Jose Lara, 

 

Greetings from Syncfusion Support. 

 

We have prepared sample based on your requirement.  

 

Sample : https://stackblitz.com/edit/angular-mjirmr-5uyc1e 

 

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

 

Regards, 

Balasubramanian S 

[jose lara]

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? 

[Vinitha Devi Murugan]

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. 

 

https://stackblitz.com/edit/angular-mjirmr-tdmncw?file=app.component.ts 

 

formElement.firstChild.insertBefore(row, args.element.querySelector('.e-all-day-time-zone-row')); 

                                                  

Regards, 

M.Vinitha devi  

[jose lara]

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.

         HTML

                         <tr>

<td class="e-textlabel">From</td>

<td colspan="4">

<input id="StartTime" class="e-field" type="text" name="StartTime" />

</td>

</tr>

          Typescript

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;

container.appendChild(inputEle);

row.appendChild(container);

let inputobj: NumericTextBox = new NumericTextBox({value:22, placeholder: 'Class' ,format:'### person(s)'});

inputobj.appendTo(inputEle);

inputEle.setAttribute('name', 'classCapacity');

}

[Vinitha Devi Murugan]

Hi Jose, 

 

Thanks for your update. 

 

Kindly use below code to append the numeric text box field before the recurrence editor. 

 

https://stackblitz.com/edit/angular-mjirmr-gnrqfs?file=app.component.ts 

 

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.  

 

Regards, 

M.Vinitha devi 

[Jeff Butterworth]

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

     }

[Nevitha Ravi]

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. 

Regards, 

Nevitha. 

[Matthew Roberts]

How would you do this on a functional component?

[Ruksar Moosa Sait]

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

Output:

Regards,

Ruksar Moosa Sait