Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reloading Form Step with useReactRouter causes setActiveIndex is not a function error #3702

Closed
andlbrei opened this issue Jun 13, 2024 · 3 comments · Fixed by #3708
Closed

Reloading Form Step with useReactRouter causes setActiveIndex is not a function error #3702

andlbrei opened this issue Jun 13, 2024 · 3 comments · Fixed by #3708
Assignees
@tujoworker
Labels
bug Something isn't working released

Comments

@andlbrei
Copy link
Contributor

andlbrei commented Jun 13, 2024 •
edited
Loading

🐛 Bug Report

Fast refresh/reloading a form step page that uses Wizard.useReactRouter() results in a setActiveIndex is not a function error.

First example from local development with the Nucleus setup (webpack). Here dev server refresh causes the error:

Screen.Recording.2024-06-04.at.15.50.16.mov

Second example is from codesandbox where dev refresh does not cause an error, but doing an explicit refresh does.
There are also some weird sync issues with the step information and the current step:

Screen.Recording.2024-06-13.at.08.44.02.mov

To Reproduce

Steps to reproduce the behavior:

https://codesandbox.io/p/sandbox/vigilant-field-dkkzvp?file=%2Fsrc%2FForm.tsx%3A18%2C41

  1. Go to a step
  2. Make sure the URL updates to contain a step query parameter
  3. Refresh the window (in codesandbox this means using the refresh icon in the sandbox, do not refresh the browser)

Expected behavior

Refreshing a form page with "step routing" should have the user stay on the same step without any errors.

Run npx envinfo

Paste the results here:

❯ npx envinfo

  System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M3 Pro
    Memory: 138.95 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.2/bin/npm
    pnpm: 8.15.7 - ~/.nvm/versions/node/v21.6.2/bin/pnpm
    bun: 1.1.13 - ~/.bun/bin/bun
  Managers:
    Cargo: 1.76.0 - ~/.cargo/bin/cargo
    Homebrew: 4.3.2 - /opt/homebrew/bin/brew
    pip3: 24.0 - /opt/homebrew/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 15.0.0 - /usr/bin/gcc
    Git: 2.43.0 - /opt/homebrew/bin/git
    Clang: 15.0.0 - /usr/bin/clang
    Curl: 8.6.0 - /usr/bin/curl
    OpenSSL: 3.3.0 - /opt/homebrew/bin/openssl
  Servers:
    Apache: 2.4.58 - /usr/sbin/apachectl
  Virtualization:
    Docker: 25.0.3 - /usr/local/bin/docker
    Docker Compose: 2.24.5 - /usr/local/bin/docker-compose
  IDEs:
    IntelliJ: 2023.3.6
    VSCode: 1.90.0 - /usr/local/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 21.0.1 - /usr/bin/javac
    Perl: 5.34.1 - /usr/bin/perl
    Python3: 3.12.3 - /opt/homebrew/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
    Rust: 1.76.0 - /Users/andersbreilid/.cargo/bin/rustc
  Databases:
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Edge: 125.0.2535.92
    Safari: 17.5

Eufemia Version

This is not a new bug. It was present before 1.35

Browser JS: Type Eufemia.version in your browser console.
'10.35.0'

Node.js: Use import or require to find out what Eufemia version is imported:
Eufemia version: 10.35.0
@tujoworker tujoworker mentioned this issue Jun 14, 2024
Merged
@tujoworker tujoworker added the bug Something isn't working label Jun 14, 2024
@tujoworker tujoworker self-assigned this Jun 14, 2024
@tujoworker
Copy link
Member

Thank you for reporting and creating this good reprod ❤️ This will be fixed in the upcoming version going out in an hour or so.

@andlbrei
Copy link
Contributor Author

Thanks for the quick fix!

tujoworker pushed a commit that referenced this issue Jun 14, 2024
@semantic-release-bot
chore(release): 10.36.0 [skip ci]
7c6fe4c 
## [10.36.0](v10.35.0...v10.36.0) (2024-06-14)

### ✨ Features

* **Anchor:** add helper classes as props ([#3701](#3701)) ([62b23e8](62b23e8))
* **forms:** add `activeWhen` prop to Wizard.Step ([#3705](#3705)) ([edd6214](edd6214))
* **Icon:** rewrite to TypeScript and hooks ([#3703](#3703)) ([70b1f8b](70b1f8b)), closes [#3699](#3699)
* **Table:** refactoring of types, documentation, and accordion file structure ([#3683](#3683)) ([6045e42](6045e42))

### 🐛 Bug Fixes

* **Autocomplete:** make `input_value` react to prop change ([#3706](#3706)) ([641e5e7](641e5e7))
* **Autocomplete:** make inputValue update on data prop changes ([#3581](#3581)) ([83b05cf](83b05cf))
* **forms:** ensure useReactRouter to handle initial data given by url ([#3708](#3708)) ([a16f1f7](a16f1f7)), closes [#3702](#3702)
* **StepIndicator:** avoid re-assigning functions that can cause titles to be not in sync ([#3697](#3697)) ([d8d740c](d8d740c)), closes [#3685](#3685)

### 📝 Documentation

* **forms:** add translations table ([#3693](#3693)) ([84605b7](84605b7))
* **Tabs:** fix the title of Tabs breakout example ([#3696](#3696)) ([7747e06](7747e06))
* **Tabs:** improve property docs ([#3665](#3665)) ([7849cba](7849cba))
* update grid layout example without responsive sidebar ([#3709](#3709)) ([f4363c2](f4363c2))
@tujoworker
Copy link
Member

🎉 This issue has been resolved in version 10.36.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

@tujoworker tujoworker

Labels
bug Something isn't working released
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(forms): ensure useReactRouter to handle initial data given by url dnbexperience/eufemia
2 participants
@tujoworker @andlbrei