Skip to content

[Bug] Import taxonomy wizard: "Continue" button on the Upload step silently no-ops after reopening the wizard with a previously used file #827

Description

@dvarenikqaconsultant

Environment: Master Sandbox, https://apps.master.openedx.io/authoring/home

Steps to reproduce

  1. Studio → Taxonomies → "+ Import".
  2. Upload any valid CSV/JSON file, click Continue — works, advances to the "Populate Taxonomy Information" step.
  3. Close the modal without completing the import.
  4. Reopen "+ Import", upload the same file again.
  5. Click Continue.
  6. Repeat step 4-5 on a subsequent reopen with a previously used file.

Expected result

Each time a valid file is uploaded and Continue is clicked on the Upload step, the wizard advances to the "Populate Taxonomy Information" step, regardless of whether that file was already used in an earlier session of the wizard.

Actual result

The first time through, Continue works as expected. On every subsequent reopen of the wizard where a previously used file is uploaded again, clicking Continue does nothing: no step change occurs and no error is shown. The button remains visually enabled. Only a full page reload restores normal behavior.

Observations

  • The button appears visually enabled (not disabled).
  • No console errors or warnings tied to this click.
  • Neither the successful nor the stuck click fires any network request — the Upload→Populate transition is purely client-side (setCurrentStep('populate')), so the network layer isn't involved.

Likely root cause (established by reading the code, not by a separate live test on the old version)

  • src/generic/loading-button/index.tsx — the click handler:

    const loadingOnClick = useCallback(async (e) => {
      if (disabled) { return; }
      ...
    }, [componentMounted, onClick]);

    disabled is missing from the useCallback dependency array, so the closure can capture a stale disabled value if the component itself isn't recreated.

  • src/taxonomy/import-tags/ImportTagsWizard.tsx — the Continue button is rendered through this ternary:

    {importPlanResult.isLoading ? <LoadingSpinner /> : (
      <LoadingButton
        disabled={!file || importPlanResult.isLoading || !!importPlanResult.error}
        onClick={reimport ? generatePlan : populateData}
      />
    )}

    While isLoading transitions from true to false, React unmounts and remounts LoadingButton, and the closure refreshes correctly — that's why the first attempt always works.

  • src/taxonomy/data/apiHooks.ts (useImportPlan) — the react-query cache key is built as taxonomyId + file.name + file.lastModified + file.size. If a later session uploads the same file, the key matches an already-cached entry, isLoading never transitions to true again, and LoadingButton never remounts. The click then keeps hitting the disabled=true value frozen from the earlier render, even though the button looks enabled (its visual state is updated separately, by a useEffect that does watch the current disabled/isLoading values).

  • src/index.jsx — the QueryClient is created once for the whole app, so the cache persists for the entire page session, which is why reloading the page fixes the behavior: it clears that cache.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions