Events not replaying due to mismatched server/client nodes

[kaitlynekdahl]

• 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]

Can you specify the version where it worked?

[kaitlynekdahl]

Yeah, 5.1.7 worked fine with Angular 4, and replayed some events in Angular 5 (worked with entering characters in a field, but not submitting with enter).

[CaerusKaru]

And did you get the same behavior with 6.0.0-beta.0?

[kaitlynekdahl]

I tried 6.0.0-beta.0 with Angular 5, and the events didn't replay at all. No warnings either.

[CaerusKaru]

@kaitlynekdahl I've looked into this issue a little more, and here's where I'm at. It looks like this works fine with 6.0.0-beta.0, except for the form submission (ie the keypress events work, just not ENTER).

I tested this against the yet-to-be-released 6.0.0-beta.2, which does NOT account for this regression. I'm going to take a deeper look into it this weekend, but the accepted workaround right now is to revert to version 6.0.0-beta.0. The form submission might be a Material issue, but I'll have to double-check.

[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.

[mgol]

This has been fully patched in 6.0.0-beta.2, which should be going out some time next week.

Where is the code for the beta available? I've run npm run build from current master (c6c9805) and linked the generated dist instead of what's published as 6.0.0-beta.1 and the issue was still there.

[mgol]

I've just read about IDs. Is assigning IDs to all inputs a requirement? I haven't seen this anywhere in the readme; my input, indeed, doesn't have an ID (a test case is available at https://github.com/mgol/angular-preboot-bug).

[CaerusKaru]

@mgol For now, 6.0.0-beta.2 is held up in PR #62. 6.0.0-beta.1 introduced a regression that fires Preboot too early in the bootstrap process (which was thought to fix another issue, #57, but we’ve developed an alternative fix for that after the revert).

You can build preboot from source off my remote branch CaerusKaru/preboot:lint until it gets merged into master.

IDs are not a requirement, but since Preboot is tiring too soon, the elements, regardless of ID, most likely don’t exist yet

[kaitlynekdahl]

@CaerusKaru I went back to 6.0.0-beta.0, added the form selector and made sure the button was only disabled on the client:

<button id="convert-button" mat-raised-button [disabled]="platformId==='browser' && !checkForm.valid">Convert</button>

This is working for now, though I don't totally understand why I had to do the browser check for button disabling in Angular 5 and not Angular 4. Either way, looking forward to 6.0.0-beta.2.

Thanks a ton!

[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.