bug(datepicker): Material Datepicker seizes up when receiving lambda as filter

Opcyc-Ben commented 1 month ago

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Code is truncated for conciseness. See Stackblitz for full example.

This code works as one would expect:

  <input
    matNativeControl
    [matDatepickerFilter]="filter"
  />
...
  filter(arg: Moment | Date | null): boolean {
    return true;
  }

This code does not:

  <input
    matNativeControl
    [matDatepickerFilter]="filter2()"
  />
...
  filter2(): (arg: Moment | Date | null) => boolean {
    return (arg: Moment | Date | null) => true;
  }

Example Stackblitz is attached. The important files to pay attention to are the demo component's .html and .ts files. Everything else is unchanged.

Reproduction

StackBlitz link: Link Steps to reproduce:

Create a function, returning a lambda compatible with the type 'DateFilterFn'.
Apply to an input decorated with 'matInput' or 'matNativeControl' like so [matDatepickerFilter]="test()". (Mind the parentheses)

Expected Behavior

A working date picker. Clicking dates should select the date.

Actual Behavior

The date picker opens and renders, however, all dates are unresponsive. Clicking dates does nothing.

Environment

Angular ('ng version' output):


Node.js version v21.5.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
            |___/

Angular CLI: 17.0.8 Node: 21.5.0 (Unsupported) Package Manager: npm 10.2.4 OS: win32 x64

Angular: 17.0.8 ... animations, cli, common, compiler, compiler-cli, core, forms ... localize, platform-browser, platform-browser-dynamic ... platform-server, router

Package Version

@angular-devkit/architect 0.1700.8 @angular-devkit/build-angular 17.0.8 @angular-devkit/core 17.0.8 @angular-devkit/schematics 17.0.8 @angular/cdk 17.0.4 @angular/material-moment-adapter 17.0.4 @ngtools/webpack 17.0.8 @schematics/angular 17.0.8 rxjs 7.8.1 typescript 5.2.2 zone.js 0.14.2

Warning: The current version of Node (21.5.0) is not supported by Angular.

- CDK/Material:

Included above

- Browser(s):

Microsoft Edge for Business Version 126.0.2592.87 (Official build) (64-bit)

- Operating System (e.g. Windows, macOS, Ubuntu):

Edition Windows 10 Pro Version 22H2 Installed on ‎13/‎06/‎2020 OS build 19045.4529 Experience Windows Feature Experience Pack 1000.19058.1000.0

crisbeto commented 1 month ago

This is because the test() function creates a new function instance every time it is invoked during change detection. This basically makes change detection run indefinitely. I'm closing the issue, because we can't do much about it.

The way to resolve it on your end would be to have a static filter function that has the logic for switch internally.

Opcyc-Ben commented 1 month ago

Just out of curiosity: How is one supposed to design a filter then, that depends on the loop variable of a surrounding @for? EDIT: oh god, I just pinged a random person on github -.-

angular-automatic-lock-bot[bot] commented 4 weeks ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / components