Issues with a search filter using stencil component

Question

Hi everyone,

So I have a filter component on a sharepoint website where you can search for new by inputing some text (can be from the title or the description) but lately I'm face sort of tricky problem. For two users, where the search is made by text input throws an error (See image below), but it works for all other users. Did anybody here face something similar?

I also want to share the code with you, hope it helps.

import {  
  Component,  
  Host,  
  h,  
  Prop,  
  Event,  
  EventEmitter,  
  Element,  
} from "@stencil/core";  
import { uniqueCategorias } from "./../../utils/utils";  
  
export interface SearchData {  
  dtInicio?: string;  
  dtFim?: string;  
  categoria?: string;  
  texto?: string;  
  isFilter?: boolean;  
}  
  
@Component({  
  tag: "snt-noticias-cards-filtro",  
  styleUrl: "noticias-cards-filtro.scss",  
  shadow: true,  
})  
export class SntNoticiasCardsFiltro {  
  @Element() private element: HTMLElement;  
  get ddlCategoria(): any {  
    return this.element.shadowRoot.querySelector("#ddlCategoria") as any; //vai buscar a categoria selecionada no filtro  
  }  
  //faz a lista de categorias para colocar na dropdown  
  get allddlCategoria(): NodeListOf<HTMLElement> {  
    return this.element.shadowRoot.querySelectorAll(  
      "ul > snt-option"  
    ) as NodeListOf<HTMLElement>;  
  }  
  
  get dtInicio(): any {  
    return this.element.shadowRoot.querySelector("#dtInicio") as any;  
  }  
  
  get dtFim(): any {  
    return this.element.shadowRoot.querySelector("#dtfim") as any;  
  }  
  get txtPesquisar(): HTMLInputElement {  
    return this.element.shadowRoot.querySelector(  
      "#txtPesquisar"  
    ) as HTMLInputElement;  
  }  
  
  @Event({ eventName: "search", bubbles: false }) search: EventEmitter<  
    SearchData  
  >;  
  
  @Prop() disable: boolean = true;  
  @Prop() categorias: any[];  
  @Prop() itenSelect: string;  
  
  categoriasFilter: any[] = [];  
  
  async componentDidLoad() {  
    this.categoriasFilter = uniqueCategorias(this.categorias);  
  }  
  //vai buscar as informações ao filtro   
  async searchHandler(event?: CustomEvent) {  
    this.search.emit({  
      categoria: this.itenSelect,  
      texto: this.txtPesquisar.value,  
      dtInicio: await this.dtInicio.getDate(),  
      dtFim: await this.dtFim.getDate(),  
    });  
  
    event && event.stopPropagation();  
  }  
  //Ao mudar de categoria  
  changeDllCategoria({ detail }) {  
    this.itenSelect = detail;  
  }  
  //limpa o filtro  
  clear() {  
    this.txtPesquisar.value = null;  
    this.dtInicio.clearDate();  
    this.dtFim.clearDate();  
    this.itenSelect = "";  
    this.ddlCategoria.setValue("");  
    this.searchHandler();  
  }  
}  

Answer 1

Hi @Miguel Tomé ,

I am not familiar with the stencil component, but if it works for other users. So I think you code is fine.

So for the two users, is there any special for them?

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.