Conversation page doesn't _always_ scroll to bottom on load

[joemasilotti]

Describe the bug

When viewing a conversation the page is supposed to scroll to the bottom. Sometimes, it does not.

To reproduce

Steps to reproduce the behavior:

1. Seed or reset the database $ bin/rails db:reset
2. Sign in as business@example.com/password
3. Add 20+ messages so the bottom one is rendered off screen
   • $ bin/rails console
   • 20.times { Conversation.first.messages.create!(sender: Developer.first, body: "Hi!") }
   • exit
4. View the conversation http://localhost:3000/conversations/1

Expected behavior

The page should scroll to the bottom.

Actual behavior

Sometimes, the page does not scroll to the bottom. The following error can be observed in the web console.

[Error] TypeError: undefined is not an object (evaluating 'this.element.scrollIntoView')
    scrollIntoView (application-e39b1a2774a52ebb17d63cebf7aaea7d637996fa48c2e68c676bfa67e0a3cb12.js:2504)
    dispatchEvent
    dispatch (application-e39b1a2774a52ebb17d63cebf7aaea7d637996fa48c2e68c676bfa67e0a3cb12.js:2836)
    pageBecameInteractive (application-e39b1a2774a52ebb17d63cebf7aaea7d637996fa48c2e68c676bfa67e0a3cb12.js:5100)
    pageIsInteractive (application-e39b1a2774a52ebb17d63cebf7aaea7d637996fa48c2e68c676bfa67e0a3cb12.js:4646)
    pageIsComplete (application-e39b1a2774a52ebb17d63cebf7aaea7d637996fa48c2e68c676bfa67e0a3cb12.js:4650)
    (anonymous function) (application-e39b1a2774a52ebb17d63cebf7aaea7d637996fa48c2e68c676bfa67e0a3cb12.js:4618)

Additional context

I can't nail down what scenario makes this occur every time. Some possibilities:

1. Navigating directly to the conversation
2. Navigating from the conversation list /conversations
3. Navigating from a redirect, like when viewing a notification

[pkayokay]

I'd love to tackle this one!

[joemasilotti]

Excellent! All yours.

[pkayokay]

After investigating, I don't think this was actually working? It looks like it's "scrolling" due to the autofocus: true on that form. The bug happens when navigating back or forwards in the browser, on a fresh visit it does work (found a related issue https://github.com/hotwired/turbo/issues/354).

I can add an actual fix for scrolling on fresh visits and the typeerro message, but would we consider it a bug when going back or forwards in a browser?

Ex. User is reading their conversations, scrolls up to the middle of the page, goes back a page on the browser, then clicks forward again. Would the user expect it to scroll to the bottom or would a better experience be to have the user land where they were previously?

https://user-images.githubusercontent.com/13375749/175542386-fb19c429-a3d8-44cb-bafc-0a8ac8244759.mov

[joemasilotti]

Nice digging! Back/forward should not scroll to bottom - good call. Only on a fresh visit.

[joemasilotti]

Closed via #521.