Giters

Ecodev / natural

Angular Material components and various utilities

Home Page:https://ecodev.github.io/natural

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Natural relation raises an error when "close" button is clicked

daviserez opened this issue · comments

commented

When we do a search with the natural relation component and click on the "close" button afterward to empty the field, it raises the following error (see below a demo of the error):
`ERROR TypeError: Cannot read properties of null (reading '__typename')``

This error doesn't appear in the demo app because of the mock system (AnyLinkMutationService) that is overriding the way NaturalLinkMutationService works.

line raising the error

Full stack trace:

core.mjs:7630 ERROR TypeError: Cannot read properties of null (reading '__typename')
    at NaturalLinkMutationService.getMutation (ecodev-natural.mjs:4920:76)
    at NaturalLinkMutationService.link (ecodev-natural.mjs:4864:21)
    at ecodev-natural.mjs:9812:80
    at Array.map (<anonymous>)
    at NaturalRelationsComponent.addRelations (ecodev-natural.mjs:9812:39)
    at NaturalRelationsComponent_natural_select_7_Template_natural_select_selectionChange_0_listener (ecodev-natural.mjs:9884:3086)
    at executeListenerWithErrorHandling (core.mjs:15767:16)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:15802:22)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)

natural-relation-error

commented

Reproduced in our other projects too. I'll take a deeper look soon-ish...

commented

This error led me to another issue due to the confusing behavior of the input & clear button in the natural-select, even if it's not directly related to console error of this video.

The clear button does two things : clear the input field, and clear the selection !

In the usecase of this video, the clear button is used to cancel the search (for autocompletion). But doing so, we clear the value of the select and emit it to the (selectionChange) event listener.

This issue is true for every natural-select and must be fixed.

Screen.Recording.2023-03-08.at.18.08.15.mov

Furthermore, even when the select is already empty : clearing the auto complete emits a "select empty value" event.

The RelationComponent.addRelation is called but receives an array with one null value [null].

The ambiguity comes from the point that the input field has two usages : display the selection and display the search for the autocompletion. What is the clear button supposed to do ?

Well I think when we're searching a value to open the autocomplete, the clear button should restore the last selection (null or any other previously selected value). In this case, there should be no output emited. It's just internal "navigation" into the natural-select.

When the natural-select already displays the selected value, the clear button should unselect it and emit and empty value.

Alternative minimal fix in RelationsComponent if we dont refactor the select :

-        const observables = relations.map(relation =>
+       const observables = relations.filter(r => !!r).map(relation =>
            this.linkMutationService.link(this.main, relation, this.otherName),
        );