chore(dotcms-ui): Fix error with autocomplete #30249

[nicobytes]

Parent Issue

#30249

Proposed Changes

• Change singal approach

The problem

This computed signal caused the error:

$filteredSuggestions = computed(() => {
    const classes = this.$classes();
    const query = this.$query();

    if (!query) {
        return classes;
    }

    return classes.filter((item) => item.includes(query));
});

filterClasses({ query }: AutoCompleteCompleteEvent): void {
    this.$query.set(query);
}

The signals functionality in PrimeNg doesn't works very well. In the previous signal, $filteredSuggestions doesn't trigger a change if the classes or query are the same as the current state. This is desirable. However, PrimeNg waits for a change in the suggestions input after the completeMethod is called to turn off the loading. This is why the loading indicator remains active but never deactivates.

To address this, we manually forced a change in $filteredSuggestions and used [...filteredClasses] to create a new array.

filterClasses({ query }: AutoCompleteCompleteEvent): void {
      const classes = this.$classes();
      const filteredClasses = query ? classes.filter((item) => item.includes(query)) : classes;
      this.$filteredSuggestions.set([...filteredClasses]);
  }

Checklist

• Tests
• Translations
• Security Implications Contemplated (add notes if applicable)

Screenshots

2024-10-07.10-03-18.mp4

This PR fixes: #30249

[dotcms-sonarqube]

Quality Gate passed

Issues
0 New issues
1 Fixed issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube