Anchor Link Click triggers full page transition

[jonasjabari]

Clicking on an anchor link somewhere, triggers full page transition and removes the anchor link from the url. this should not happen. might be the app.js "window.onpopstate" event

[jonasjabari]

What is the current behaviour?

If you click on the link "go to anchor", the page is reloaded and the anchor disappears from the url.

link path: "#someanchor", text: "go to anchor"

br times: 200

div id: "#someanchor" do
  plain "hello!"
end

What is the expected behaviour?

If you click on the link "go to anchor", the page is not reloaded and only the scroll position is updated accordingly (default browser behaviour). The anchor link is visible in the url and works after full page reload (or link sharing etc)

Which versions of Matestack, and which browser/OS are affected by this issue? Did this work in previous versions of Matestack?

• all matestack versions
• all common browsers

[cameronnorman]

Thank you for this. I shall make sure my PR resolves this

[PragTob]

Issue is more complex than initially anticipated.

In an isolated test environment it works:

  it "behaves correctly with anchor links (no reload, retain anchor)" do
    class ExamplePage < Matestack::Ui::Page
      def response
        components {
          link path: "#someanchor", text: "go to anchor", id: "my-link"

          br times: 200

          div id: "someanchor" do
            plain "hello!"
          end

          div id: "my-div" do
            plain "#{DateTime.now.strftime('%Q')}"
          end
        }
      end
    end
    visit "/example"

    element = page.find("#my-div")
    before_content = element.text

    puts before_content

    page.click_link("my-link")

    # if the page reloaded we'd have different content here but as we don't want reloads
    # we want the sime
    expect(page).to have_css("#my-div", text: before_content)
    expect(page.current_url).to end_with("#someanchor")
  end

I also tried stopping and playing around in the test browser - worked beautifully.

Moving it to the example app within the dummy app (replacing my_first_page) it stops working.

Trying to isolate the reason for this. Suspects: Other features/settings like async/events interferring with what we want to do.

[PragTob]

Problem seems indeed to be related to having an app at all.

i.e. this works:

class MyAppController < ApplicationController

  include Matestack::Ui::Core::ApplicationHelper

  class MyFirstPage < Matestack::Ui::Page

    def response
      components {
        link path: "#someanchor", text: "go to anchor", id: "my-link"

        br times: 200

        div id: "someanchor" do
          plain "hello!"
        end

        div id: "my-div" do
          plain "#{DateTime.now.strftime('%Q')}"
        end
      }
    end
  end


  def my_first_page
    responder_for(MyFirstPage)
  end
end

this doesn't work:

class Apps::MyApp < Matestack::Ui::App
  def response
    components {
      page_content
    }
  end
end

class Pages::MyApp::MyFirstPage < Matestack::Ui::Page

  def response
    components {
      link path: "#someanchor", text: "go to anchor", id: "my-link"

      br times: 200

      div id: "someanchor" do
        plain "hello!"
      end

      div id: "my-div" do
        plain "#{DateTime.now.strftime('%Q')}"
      end
    }
  end


end

class MyAppController < ApplicationController

  include Matestack::Ui::Core::ApplicationHelper

  def my_first_page
    responder_for(Pages::MyApp::MyFirstPage)
  end
end

Of course, I inlined the page before so theoretically it could also be some side effect from auto loading files but I consider that to be rather unlikely.

[PragTob]

And more: it's not the whole page that's being reloaded, just a rerender of the page ala http://127.0.0.1:46175/example?only_page=true is triggered

[jonasjabari]

resolved via #361