Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IMP] components: use a hook to register/clean up event listeners #2469

Closed
wants to merge 1 commit into from

Conversation

rrahir
Copy link
Collaborator

@rrahir rrahir commented May 11, 2023

Currently, we register event listener on Ref.el upong mount and unmount steps of the component lifecycle.

However, depending on the component structure, the element of the Ref could change from a rendering to another*, preventing the proper cleaing of the listener.

This commit introduces a new hook to handle such cases more correctly.

  • an example can be found in component SelectionInput.

Description:

description of this task, what is implemented and why it is implemented that way.

Odoo task ID : TASK_ID

review checklist

  • feature is organized in plugin, or UI components
  • support of duplicate sheet (deep copy)
  • in model/core: ranges are Range object, and can be adapted (adaptRanges)
  • in model/UI: ranges are strings (to show the user)
  • undo-able commands (uses this.history.update)
  • multiuser-able commands (has inverse commands and transformations where needed)
  • new/updated/removed commands are documented
  • exportable in excel
  • translations (_lt("qmsdf %s", abc))
  • unit tested
  • clean commented code
  • track breaking changes
  • doc is rebuild (npm run doc)
  • status is correct in Odoo

@robodoo
Copy link
Collaborator

robodoo commented May 11, 2023

Copy link
Collaborator

@LucasLefevre LucasLefevre left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice 👍

Comment on lines 11 to 12
*/

export function useRefListener(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove the additional line between the docstring and the function

...listener: Parameters<typeof addEventListener>
) {
useEffect(
(el) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
(el) => {
(el: HTMLElement | null) => {

Currently, we register event listener on `Ref.el` upong mount and
unmount steps of the component lifecycle.

However, depending on the component structure, the element of the
`Ref` could change from a rendering to another*, preventing the proper
cleaing of the listener.

This commit introduces a new hook to handle such cases more correctly.

* an example can be found in component `SelectionInput`.
Copy link
Collaborator

@LucasLefevre LucasLefevre left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

robodoo r+

robodoo pushed a commit that referenced this pull request May 19, 2023
Currently, we register event listener on `Ref.el` upong mount and
unmount steps of the component lifecycle.

However, depending on the component structure, the element of the
`Ref` could change from a rendering to another*, preventing the proper
cleaing of the listener.

This commit introduces a new hook to handle such cases more correctly.

* an example can be found in component `SelectionInput`.

closes #2469

Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
@robodoo robodoo temporarily deployed to merge May 19, 2023 07:59 Inactive
@robodoo robodoo closed this May 19, 2023
@robodoo robodoo added the 16.4 label May 19, 2023
@fw-bot fw-bot deleted the master-ref-listener-rar branch June 2, 2023 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants