From cf271204e42b90d3e8d34cc44839ddf4be2dcbdf Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Wed, 19 Aug 2026 10:39:41 +0200
Subject: [PATCH] fix(dropdown-sort-web): add onChange handler to prevent React
 warnings Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

---
 packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md    | 4 ++++
 .../dropdown-sort-web/src/components/SortComponent.tsx      | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md b/packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md
index 6f42b51b66..b4b76b456e 100644
--- a/packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed React console warnings from uncontrolled input elements.
+
 ## [3.4.0] - 2025-10-01
 
 ### Fixed
diff --git a/packages/pluggableWidgets/dropdown-sort-web/src/components/SortComponent.tsx b/packages/pluggableWidgets/dropdown-sort-web/src/components/SortComponent.tsx
index 8a7b52b651..113cc0f3e1 100644
--- a/packages/pluggableWidgets/dropdown-sort-web/src/components/SortComponent.tsx
+++ b/packages/pluggableWidgets/dropdown-sort-web/src/components/SortComponent.tsx
@@ -1,8 +1,8 @@
-import { useOnClickOutside } from "@mendix/widget-plugin-hooks/useOnClickOutside";
-import { usePositionObserver } from "@mendix/widget-plugin-hooks/usePositionObserver";
 import classNames from "classnames";
 import { CSSProperties, ReactElement, useCallback, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { useOnClickOutside } from "@mendix/widget-plugin-hooks/useOnClickOutside";
+import { usePositionObserver } from "@mendix/widget-plugin-hooks/usePositionObserver";
 
 interface SortComponentProps<Dir = "asc" | "desc"> {
     className?: string;
@@ -105,7 +105,7 @@ export function SortComponent(props: SortComponentProps): ReactElement {
         >
             <div className="dropdown-triggerer-wrapper">
                 <input
-                    value={props.value ? selected?.caption : ""}
+                    value={selected?.caption ?? ""}
                     placeholder={props.placeholder}
                     className="form-control dropdown-triggerer"
                     onClick={containerClick}