Skip to content

Fix stale renderRow in refs dropdown

Update:

After this discussion > #327085 (comment 567638235), we have decided the best way to solve this problem is to convert the ref dropdown to Vue.

To tackle this iteratively, here are the suggested steps we can take:

  • Mount simple Vue dropdown
  • Connect dropdown with Vue router
  • Add search to dropdown
  • Update feature spec and ensure FF coverage
  • Clean up: Remove Project.js

Because the use of stale date from renderRow in the refs dropdown, we have already seen 2 related issues.

So far we've just been applying a band-aid to a leaky pipe. But as noted here (!57197 (comment 546179270)), we should instead replace the broken pipe with a pipe that doesn't leak 💪:

We currently use the clicked method to update the links. While this does account for meta key + click, it doesn't work for content menu (right click => open in new tab). The better fix is to make sure the links in the dropdown are updated correctly in the renderRow method of project.js.

The reason they aren't is we are using the output of serializeForm which has hidden inputs set on page load.

The vue repo browser doesn't update this form when changing pages.

Then when renderRow is called (when the dropdown is opened) it uses whatever form values were set on page load!

So the more complete and comprehensive fix is:

  1. make the Vue repo browser update the form attributes (or have them linked to the vue values somehow)
  2. delete the clicked method entirely
  3. possibly need to add js-gl-dropdown-refresh-on-open class to the dropdown trigger to force re-rendering each time it opens

Example of this problem

On page load, the dropdown populates our row with the correct link. The path has the correct information that corresponding to the current directory. However when the user navigates to a different directory, the path is no longer incorrect. The data is still reflecting the previous date when the page loaded. The path is no longer correct and is using a stale date 😱

On page load (path is correct) Navigate to another path (path is incorrect)
image image

Because of this problem, we introduced this method click that programmatically takes over the direction of our anchor tag.

Proposed Solution

So the proposal is to remove the need to take over and just make sure the dropdown ALWAYS contains the correct information. And if the water is clean, we won't need to implement all this funky processing 😄

Edited by Samantha Ming