Scrollbar bug

[aunjaffery]

Description

Using wails with react. i have attached the video. you can easily reproduce the bug. scrollbars does not updates and sometimes just disappears when deleting items from end. It works fine in chrome and firefox.

import { useState } from "react";

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  const deleteItem = (id) => setItems(items.filter((i) => i !== id));

  const addNewItem = () => {
    let newitem = items[items.length - 1] + 1;
    setItems([...items, newitem ? newitem : 0]);
  };
  return (
    <div id="App" className="bg-gray-100 h-screen p-6">
      <div className="max-h-[200px] overflow-y-scroll">
        {items.map((i) => (
          <div
            className="flex items-center justify-between gap-x-2 bg-blue-200 text-gray-600 p-2 mr-1 rounded-sm"
            key={i}
            onClick={() => deleteItem(i)}
          >
            <p className="whitespace-nowrap">item {i}</p>
          </div>
        ))}
        <div className="bg-gray-300 py-2 px-2 rounded-sm" onClick={addNewItem}>
          +
        </div>
      </div>
    </div>
  );
}

export default App;

To Reproduce

copy the snippet in app.js. and run "wails dev"

Expected behaviour

Scrollbar should update when deleting the items. just like it does in chrome and firefox.

Screenshots

https://github.com/wailsapp/wails/assets/48084117/c27186bf-72c3-4d1f-81b0-781c6d254f3f

Attempted Fixes

No response

System Details

# Wails
Version         | v2.9.1
Package Manager | apt

# System
┌────────────────────────────────────────────────────────────────────────────────────────┐
| OS           | Linux Mint                                                              |
| Version      | 21.3                                                                    |
| ID           | linuxmint                                                               |
| Go Version   | go1.22.4                                                                |
| Platform     | linux                                                                   |
| Architecture | amd64                                                                   |
| CPU          | Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz                                |
| GPU          | WhiskeyLake-U GT2 [UHD Graphics 620] (Intel Corporation) - Driver: i915 |
| Memory       | 16GB                                                                    |
└────────────────────────────────────────────────────────────────────────────────────────┘

# Dependencies
┌──────────────────────────────────────────────────────────────────────────┐
| Dependency | Package Name          | Status    | Version                 |
| *docker    | docker.io             | Installed | 27.0.3                  |
| gcc        | build-essential       | Installed | 12.9ubuntu3             |
| libgtk-3   | libgtk-3-dev          | Installed | 3.24.33-1ubuntu2.1      |
| libwebkit  | libwebkit2gtk-4.0-dev | Installed | 2.44.2-0ubuntu0.22.04.1 |
| npm        | npm                   | Installed | 10.7.0                  |
| *nsis      | nsis                  | Available | 3.08-2                  |
| pkg-config | pkg-config            | Installed | 0.29.2-1ubuntu3         |
└──────────────────────── * - Optional Dependency ─────────────────────────┘

# Diagnosis
Optional package(s) installation details:
  - nsis: sudo apt install nsis

 SUCCESS  Your system is ready for Wails development!

 ♥   If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

Additional context

Plus button adds the items in state. clicking the item remove the item from the list.

[aunjaffery]

Is it just me or someone else also has this bug? Am I doing something wrong?

[Goutam-04]

I have tested the provided code on my machine (Linux Mint), and it works as expected. The scrollbar appears when the items overflow from the window and disappears when there are fewer items.

[aunjaffery]

@Goutam-04 can you please try to do this. add 10 items. scroll all the way down and try to delete items 1 by 1 form bottom. In my case scrollbar disappears when you react item 5. and you cannot access 1st 4 items. like i have shown in video at 42sec to 50sec. try to do this couple of times please. thank you very much!