Fix scroll buttons disabled/enabled states in the Kiosk mode

packages/components/src/components.d.ts

@@ -863,6 +863,10 @@ export namespace Components {
           * @type {number}
          */
         "scrollLength": number;
+        /**
+          * Update scroll buttons enabled/disabled states.
+         */
+        "updateScrollButtons": () => Promise<any>;
         /**
           * Updates enable/disable state for scroll up and down buttons.
           * @returns

packages/components/src/components/scroll-buttons/readme.md

@@ -78,6 +78,16 @@ A `updateScrollButtonsState` method can be called on the `<mi-scroll-buttons>` e
 
 ## Methods
 
+### `updateScrollButtons() => Promise<any>`
+
+Update scroll buttons enabled/disabled states.
+
+#### Returns
+
+Type: `Promise<any>`
+
+
+
 ### `updateScrollButtonsState() => Promise<void>`
 
 Updates enable/disable state for scroll up and down buttons.

packages/components/src/components/scroll-buttons/scroll-buttons.tsx

@@ -5,12 +5,26 @@ import { Component, h, JSX, Method, Prop, Watch } from '@stencil/core';
     styleUrl: 'scroll-buttons.scss',
     shadow: true
 })
+
 export class ScrollButtons {
     /**
      * Reference to the element with scroll on parent element.
+     *
      * @type {HTMLDivElement}
      */
     @Prop() scrollContainerElementRef: HTMLDivElement;
+
+    /**
+     * Update scroll buttons enabled/disabled states.
+     */
+    @Method()
+    public async updateScrollButtons(): Promise<any> {
+        this.updateScrollButtonsState();
+    }
+
+    /**
+     * Watch for container scroll events.
+     */
     @Watch('scrollContainerElementRef')
     addScrollEventListener(): void {
         this.resizeObserver?.disconnect();
@@ -36,12 +50,16 @@ export class ScrollButtons {
         this.addScrollEventListener();
     }
 
+    /**
+     * Disconnects ResizeObserver.
+     */
     disconnectedCallback(): void {
         this.resizeObserver?.disconnect();
     }
 
     /**
      * Determines how far to scroll when clicking one of the buttons. Default value is 100.
+     *
      * @type {number}
      */
     @Prop() scrollLength = 100;
@@ -53,6 +71,7 @@ export class ScrollButtons {
 
     /**
      * Updates enable/disable state for scroll up and down buttons.
+     *
      * @returns {Promise<void>}
      */
     @Method()
@@ -65,15 +84,20 @@ export class ScrollButtons {
         }
 
         // Disable or enable the scroll down button
-        if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop === this.scrollContainerElementRef.clientHeight) {
+        if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop === this.scrollContainerElementRef.clientHeight
+            && this.upButtonElement.disabled === true
+        ) {
             this.downButtonElement.disabled = true;
-        } else if (this.downButtonElement.disabled) {
+        } else if (this.scrollContainerElementRef.scrollHeight - this.scrollContainerElementRef.scrollTop > this.scrollContainerElementRef.clientHeight) {
             this.downButtonElement.disabled = false;
+        } else {
+            this.downButtonElement.disabled = true;
         }
     }
 
     /**
      * Update scroll position.
+     *
      * @param {number} value - Value to scroll.
      */
     updateScrollPosition(value: number): void {
@@ -87,22 +111,31 @@ export class ScrollButtons {
         }
     }
 
+    /**
+     * Render scoll buttons.
+     *
+     * @returns {JSX.Element}
+     */
     render(): JSX.Element {
         return (
             <div part="container" class="scroll-buttons">
                 <button part="button button-up" class="mi-button mi-button--base btn btn-up"
                     type="button"
                     disabled
                     aria-label="Scroll Up"
-                    ref={(el) => this.upButtonElement = el as HTMLButtonElement}
-                    onClick={() => this.updateScrollPosition(-this.scrollLength)}>
+                    ref={(el: HTMLButtonElement | null): void => {
+                        this.upButtonElement = el as HTMLButtonElement | null;
+                    }}
+                    onClick={(): void => this.updateScrollPosition(-this.scrollLength)}>
                     <mi-icon icon-name="chevron-up" />
                 </button>
                 <button part="button button-down" class="mi-button mi-button--base btn btn-down"
                     type="button"
                     aria-label="Scroll Down"
-                    ref={(el) => this.downButtonElement = el as HTMLButtonElement}
-                    onClick={() => this.updateScrollPosition(this.scrollLength)}>
+                    ref={(el: HTMLButtonElement | null): void => {
+                        this.downButtonElement = el as HTMLButtonElement | null;
+                    }}
+                    onClick={(): void => this.updateScrollPosition(this.scrollLength)}>
                     <mi-icon icon-name="chevron-down" />
                 </button>
             </div>

packages/map-template/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.54.6] - 2024-09-03
+
+### Fixed
+
+- Resolved an issue where kiosk scroll buttons were sometimes disabled, preventing users from clicking them.
+
 ## [1.54.5] - 2024-08-29
 
 ### Fixed

packages/map-template/src/components/Map/MapboxMap/ViewmodeSwitch/ViewModeSwitch.jsx

@@ -35,18 +35,18 @@ function ViewModeSwitch({ mapView }) {
                 setViewMode(ViewModes.initial3D);
             }
             switch (viewMode) {
-                    // If the 2D View Mode has been clicked, hide the 3D features and tilt the map to 0 degrees. 
+                    // If the 2D View Mode has been clicked, hide the 3D features and tilt the map to 0 degrees.
                 case ViewModes.clicked2D:
                     mapView.tilt(0, 2000);
                     mapView.hideFeatures([mapView.FeatureType.MODEL3D, mapView.FeatureType.WALLS3D, mapView.FeatureType.EXTRUSION3D, mapView.FeatureType.EXTRUDEDBUILDINGS]);
                     break;
                     // If the Visibility Switch has not been interacted with, hide the 2D features
-                    // Tilt the map to the 'currentPitch' value - this is the value that the timeout property resets to. 
+                    // Tilt the map to the 'currentPitch' value - this is the value that the timeout property resets to.
                 case ViewModes.initial3D:
                     mapView.tilt(currentPitch, 2000);
                     mapView.hideFeatures([mapView.FeatureType.MODEL2D, mapView.FeatureType.WALLS2D]);
                     break;
-                    // If the 3D View Mode has been clicked, hide the 2D features and tilt the map to 45 degrees. 
+                    // If the 3D View Mode has been clicked, hide the 2D features and tilt the map to 45 degrees.
                 case ViewModes.clicked3D:
                     mapView.tilt(45, 2000);
                     mapView.hideFeatures([mapView.FeatureType.MODEL2D, mapView.FeatureType.WALLS2D]);

packages/map-template/src/components/Search/Search.jsx

@@ -140,6 +140,17 @@ function Search({ onSetSize, isOpen }) {
         setSearchResults(locations);
         setFilteredLocations(locations);
         setShowNotFoundMessage(locations.length === 0);
+
+        // Handles updates to scroll buttons when the category changes.
+        // When a category changes, the scroll buttons need to have their enabled/disabled states updated.
+        // Since some categories might load before the DOM element is fully rendered, we listen for the 'transitionend' event.
+        // The 'transitionend' event is triggered when the DOM element changes its size, which can occur as a result of new categories being fetched.
+        // Upon completion of the size transition, the 'updateScrollButtons' function is triggered to handle the updated state.
+        if (isKioskContext) {
+            searchRef.current?.addEventListener('transitionend', () => {
+                scrollButtonsRef?.current?.updateScrollButtons();
+            }, { once: true });
+        }
     }
 
     /**