…onic-team#31202)
Issue number: internal
---------
## What is the current behavior?
Currently, when an `ion-modal`'s `breakpoints` are set after the
component has loaded, `sortedBreakpoints` stays empty.
`breakpointsChanged` had no `@Watch`, so it only ran once from the
manual call in `componentDidLoad`. `present()` still recalculates
`isSheetModal` to `true` from the late-set `breakpoints` (added in
ionic-team#30839), so the sheet gesture initializes with an empty breakpoints
array and throws `Reduce of empty array with no initial value` on the
`breakpoints.reduce(...)` in `sheet.ts` when the sheet is swiped, which
breaks swiping entirely.
This shows up with framework bindings that land after the web component
loads, e.g., an inline `ion-modal` inside an Angular component rendered
through a plain `router-outlet` with zoneless change detection. It
doesn't reproduce with zone change detection, with
`ModalController.create`, or with the modal inside `ion-router-outlet`,
since those set `breakpoints` before the modal presents.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Now `breakpointsChanged` has `@Watch('breakpoints')`, so `breakpoints`
set after the component loads update `sortedBreakpoints`. This mirrors
how `trigger`/`triggerChanged` already handles late binding (a watch
plus a manual call in `componentDidLoad`). The sheet gesture then gets
the real breakpoints and swiping works.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
## Other information
Sheet modal preview:
-
https://ionic-framework-git-fix-modal-late-breakpoints-ionic1.vercel.app/src/components/modal/test/sheet
Note that the preview won't show *this* working, but will show the modal
at least isn't broken from this change.
Current dev build:
```
8.8.10-dev.11781019195.14a7eeaf
```