orchidsoftware / orchidsoftware/platform
In Listener, old listener_controller event is still being triggered on target field change
@tabuna is already working on this.
Since Jan 23, 2024.
- Dominant language
- PHP
- Stars
- 4.8k
- Forks
- 663
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 7
Description
Describe the bug
When using Listener with target field and then changing the target field more than once will trigger the old controller instance's asyncLoadData function. This causes the browser to throw an error FormData constructor: Argument 1 is not an object. since the controller's element is already detached.
To Reproduce
Steps to reproduce the behavior:
- Create a Screen with a single checkbox
- Create a Listener that targets the checkbox
- Check/uncheck the checkbox more than once
Expected behavior
No client side error occurred.
Desktop (please complete the following information):
- OS: Windows 11
- Browser Firefox
- Version 121.0.1
Server (please complete the following information):
- Platfrom Version: 14
- Laravel Version: 10
- PHP Version: 8.2
- Database: MariaDB
- Database Version: 10
Additional context
Seems like the problem's caused by stale event handler pointing to the asyncLoadData. I tried removing the event handler on disconnect to solve it through my own custom controller like follows.
eventHandles = {};
connect() {
this.targets.forEach(name => {
document.querySelectorAll(`[name="${name}"]`)
.forEach((field) => {
this.eventHandles[field] = () => this.asyncLoadData();
field.addEventListener('change', this.eventHandles[field])
});
});
}
disconnect() {
this.targets.forEach(name => {
document.querySelectorAll(`[name="${name}"]`)
.forEach((field) =>
field.removeEventListener('change', this.eventHandles[field])
);
});
}
Not sure if this is the preferred approach though. If so, I can submit a pull request.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.