# UI improvements for the zigbee2mqtt integration **URL:** \ **Category:** Développement\ **Created:** [September 18, 2023, 4:25pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364 "2023-09-18T16:25:27Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\ **Post date:** [September 18, 2023, 4:25pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/1 "2023-09-18T16:25:27Z")
Hello everyone, I’d like to know whether it would be interesting and feasible to improve the display of devices in the Zigbee2MQTT integration. Several points: - DEVICE section: the search field is cumbersome to use — basically I don’t have time to start typing before it already starts filtering the devices and it tends to skip some letters that I type… others may have noticed this too. It’s as if there needed to be a bit more « latency » between the typed letters and the filtering. - DISCOVERY section: would it be possible to hide by default the devices already added to Gladys? With, at worst, a button to show them (I think that exists somewhere… in the LAN integration, no?) because on my side, especially on mobile, the list is so long that it’s a chore to scroll so much. - In the same scrolling issue when you have many devices, is it possible to add a small arrow to go back to the top of the page with a single click? Those are my suggestions — over to you, dear developers, to tell me whether this is feasible for you! 😉 ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [September 18, 2023, 5:10pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/2 "2023-09-18T17:10:46Z")
Thanks for the feedback! For the first point, that’s clearly something that could be a GitHub issue, it’s not normal For the second point, I’d like to get more feedback to know if this view is shared by everyone 🙂 For the third point, why not! At the moment I’m the only one on Zigbee since Alex became a dad, so it’ll probably be me who takes care of that. ---
**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\ **Post date:** [September 18, 2023, 5:17pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/3 "2023-09-18T17:17:41Z")
Ok great, so we’re waiting for other feedback! 👍 ---
**Author:** ![spenceur](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/spenceur/32/1961_2.png) [@spenceur](https://community.gladysassistant.com/u/spenceur)\ **Post date:** [September 18, 2023, 5:19pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/4 "2023-09-18T17:19:56Z")
Totally agree with the points raised by @guim ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [September 20, 2023, 4:58pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/5 "2023-09-20T16:58:49Z")
Ok I think these points need to be reported somewhere otherwise they’ll be forgotten 🙂 **My opinion:** - For point 1, create a GitHub issue (in English, if possible with a video to reproduce the bug) - For point 2, GitHub issue as well. A short text will suffice - For point 3, GitHub issue as well. Put a link in each issue to this thread for archiving. I can’t guarantee it will be handled in the short term, I’m the only one working on the Zigbee integration right now (looking for a maintainer if anyone happens to see this…) and there are a lot of requests! ---
**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\ **Post date:** [September 20, 2023, 5:59pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/6 "2023-09-20T17:59:11Z")
Okay, I’ll take care of it as soon as I have a bit of time. ---
**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\ **Post date:** [September 21, 2023, 3:15pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/7 "2023-09-21T15:15:54Z")
It’s done 👍 I hope I did it right!! ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [September 21, 2023, 4:51pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/8 "2023-09-21T16:51:17Z")
Thanks! I’d like you to put a link to this thread in each issue. For videos, in general try to put them in mp4 format — it lets you view the video directly on GitHub instead of having to download it… 🙂 ---
**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\ **Post date:** [September 21, 2023, 5:18pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/9 "2023-09-21T17:18:04Z")
Everything is done! 😉 ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [October 3, 2023, 3:14pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/10 "2023-10-03T15:14:17Z")
Hello, I did some development between two naps to filter the already existing z2m devices (cc @VonOx). The test image (will be ready in 1 hour) is `atrovato:z2m-filter-devices`. Thanks for your feedback (I admit I did the development blindly, drawing inspiration from the lan-manager feature). ---
**Author:** ![cicoub13](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cicoub13/32/4482_2.png) [@cicoub13](https://community.gladysassistant.com/u/cicoub13)\ **Post date:** [October 3, 2023, 6:19pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/11 "2023-10-03T18:19:25Z")
I have an error when loading the Zigbee Discovery page ```auto actions.js:42 Uncaught TypeError: Cannot read properties of undefined (reading 'filter') at Object.setDiscoveredDevices (actions.js:42:49) at Object.setDiscoveredDevices (index.js:60:22) at c.componentWillMount (index.js:22:16) ``` I think `incomingDevices` is empty at that moment ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [October 3, 2023, 6:33pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/12 "2023-10-03T18:33:11Z")
Thanks @cicoub13 for your feedback! I’m generating a new image with the fix for `incomingDevices = undefined`; it should take about 6 minutes. ---
**Author:** ![cicoub13](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cicoub13/32/4482_2.png) [@cicoub13](https://community.gladysassistant.com/u/cicoub13)\ **Post date:** [October 3, 2023, 8:03pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/13 "2023-10-03T20:03:20Z")
The page loads. On mobile, it’s a bit cramped. ![Screenshot_20231003-220149](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/2/2875339fb6d66267b3b11d1c7f16f730a937a922.png) The button doesn’t work. I’ll test it on a computer tomorrow to give you more details. ---
**Author:** ![cicoub13](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cicoub13/32/4482_2.png) [@cicoub13](https://community.gladysassistant.com/u/cicoub13)\ **Post date:** [October 4, 2023, 7:27am UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/14 "2023-10-04T07:27:53Z")
```auto props.js:153 Uncaught TypeError: this.l[(e.type + false)] is not a function at HTMLInputElement.x (props.js:153:20) ``` I think you forgot to add `setDiscoveredDevices` to the props on line 50 in `index.js` ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [October 4, 2023, 10:05am UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/15 "2023-10-04T10:05:39Z")
Actually, on the `onClick` I hadn’t added the toggle function, it’s fixed, as well as the display. The corrected image is available on Docker. Thanks again @cicoub13 \<3 ---
**Author:** ![cicoub13](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cicoub13/32/4482_2.png) [@cicoub13](https://community.gladysassistant.com/u/cicoub13)\ **Post date:** [October 4, 2023, 10:12am UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/16 "2023-10-04T10:12:54Z")
It works perfectly 👍 ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [October 4, 2023, 10:18am UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/17 "2023-10-04T10:18:00Z")
Great, I’ve put the PR up for review. ---
**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\ **Post date:** [October 13, 2023, 7:16pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/18 "2023-10-13T19:16:49Z")
@pierre-gilles the PR to add the filter for devices that have already been added: > > > \### Pull Request check-list > > To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items: > > \- \[x\] If your changes affects code, did your write the tests? > \- \[x\] Are tests passing? (\`npm test\` on both front/server) > \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server) > \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server) > \- \[x\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front) > \- \[x\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (\[french forum\](https://community.gladysassistant.com/)/\[english forum\](https://en-community.gladysassistant.com/)) for testing before merging. > \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code) > \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com). > \- \[x\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com). > > NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open. > > \### Description of change > > Fixes #1890 and #1655 The following 2 issues are fixed: - [[zigbee2mqtt] Hide already added devices · Issue #1890 · GladysAssistant/Gladys · GitHub](https://github.com/GladysAssistant/Gladys/issues/1890) - [[FRONT] Z2M Discover tab must list only device discovered and with feature update · Issue #1655 · GladysAssistant/Gladys · GitHub](https://github.com/GladysAssistant/Gladys/issues/1655) ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [October 16, 2023, 12:47pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/19 "2023-10-16T12:47:50Z")
Thanks for the PR! It looks good to me, I just have one small comment: > > > \### Pull Request check-list > > To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items: > > \- \[x\] If your changes affects code, did your write the tests? > \- \[x\] Are tests passing? (\`npm test\` on both front/server) > \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server) > \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server) > \- \[x\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front) > \- \[x\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (\[french forum\](https://community.gladysassistant.com/)/\[english forum\](https://en-community.gladysassistant.com/)) for testing before merging. > \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code) > \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com). > \- \[x\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com). > > NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open. > > \### Description of change > > Fixes #1890 and #1655 ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [October 27, 2023, 12:14pm UTC](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364/20 "2023-10-27T12:14:26Z")
Thanks for the fixes @AlexTrovato ! Be sure to leave me a message on the forum next time when it’s fixed, [Next page](https://community.gladysassistant.com/t/ameliorations-dans-lui-de-lintegration-zigbee2mqtt/8364.md?page=2)