Events not replaying due to mismatched server/client nodes

• I’m submitting a …

• bug report
• feature request

• Which parts of preboot are affected by this issue?

• server side
• client side
• inline
• build process
• docs
• tests

• What is the current behavior? Preboot (v. 6.0.0-beta.1) will not replay events on the client-side because client and server nodes do not match. When specifying the eventSelectors, getting the following warnings:

nothing found for INPUT#money-input so using INPUT

No matching client node found for INPUT_app-root_s2_s5_s1_s2_s2_s1_s1_s2_s2. You can fix this by assigning this element a unique id attribute.

and

Trying to dispatch event keydown to node INPUT_app-root_s2_s5_s1_s2_s2_s1_s1_s2_s2 but could not find client node. Server node is: [...]

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo. Repo for the project can be found here: https://github.com/kaitlynekdahl/universal-check-app/tree/master.

1. Clone the project and run npm install
2. Run npm run start-universal to run the application with SSR
3. Navigate to localhost:3000 and open devtools
4. Under the network tab, set the network throttling to a slower connection (2G or 3G) and hard-refresh the page
5. While the server-side page is displayed and client is loading, enter a number in the input field and press enter on the keyboard (there are some dummy callbacks to show that the events are being recorded on the server-side)
6. Expected behavior is for page to freeze until client is bootstrapped, then events to be replayed (including form submission upon enter), but the warnings above will print the console and events will not replay.

• What is the expected behavior? Client and server nodes should match. The input element in question has a unique ID called #money-input (not sure where INPUT_app-root_s2_s5_s1_s2_s2_s1_s1_s2_s2 is coming from?) and events should replay upon client bootstrap.

• Environment:

• Browser: all
• Language: TypeScript 2.4.2/Angular 5.0.0
• OS: Windows
• Platform: NodeJs

• Other information Could this maybe be a Material or minification thing? I tried using Material directives for the event selectors, but that didn’t help.

Might be worth mentioning that I tried with an older version of Preboot (5.1.7) and got the keypress events to replay except for the enter key/form submission. That version had no problems with Angular 4 either.

At this point, any info on this is appreciated.

[CaerusKaru]

Ok, here’s the resolution. This has been fully patched in 6.0.0-beta.2, which should be going out some time next week. I’ve put workaround instructions for the setTimeout issue here.

Your issue with the form submission is straightforward: you set the disabled property on your button for when the form is invalid. Unfortunately, on the SSR-rendered view this will always be the case because there is no JavaScript active to check for validity, which is blocking your submissions. You also failed to add the following eventSelector to detect form submission:

{ selector: 'form', events: ['submit'], preventDefault: true, freeze: true, action: myOtherFunction },

Adding a conditional to check if you’re on the server to the disabled property and adding the above selector should resolve your issues. Then 6.0.0-beta.2 should resolve everything else.

[CaerusKaru]

The proper way to handle browser-side check is the following:

isPlatformBrowser(this.platformId)

The value of the platformId is internal and not considered reliable for checking.