Skip to content

feat: enable property decorator for property accessors #8587

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

Merged
merged 2 commits into from
Apr 4, 2024

Conversation

pskelin
Copy link
Contributor

@pskelin pskelin commented Mar 29, 2024

It is now possible to use the @property decorator on a property accessor like this:

class Accessor extends UI5Element {
  storage: boolean = false;

  @property()
  set myProp(value: boolean) {
    this.storage = value;
    // do sync work here
  }

  get myProp() {
    return this.storage;
  }

  render() {
    return html`<div>${this.myProp}</html>`;
  }
}

The main use case for this is to to synchronously make a DOM operation (like adding a class to show the dialog when a property is set), as the normal setting of a property triggers an async rendering cycle. A real use case is setting the focus to the first element of the dialog will show the iOS keyboard only if it is in the same tick as the click handler that triggered the operation (#8583)

Implementation

Previously, the @property decorator was overwriting such accessors and using the internal UI5Element _state for storage. With this change, if an accessor pair exists, it will be used for storage, this triggering the custom logic.

Additionally, setting the property will still trigger invalidation, as well as update the attribute in the DOM.

@pskelin pskelin marked this pull request as ready for review April 4, 2024 07:05
@pskelin pskelin requested a review from ilhan007 April 4, 2024 07:05
@pskelin pskelin merged commit 12b6f1a into main Apr 4, 2024
@pskelin pskelin deleted the decorate-accessor branch April 4, 2024 07:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants