From 5ed3651348c1b329e6e617bcec951ed9701a76a6 Mon Sep 17 00:00:00 2001
From: Danny Simms <103758200+GreyNewfie@users.noreply.github.com>
Date: Wed, 4 Feb 2026 21:26:00 -0330
Subject: [PATCH 1/2] Replace Select with Autocomplete for Slack channel
 selection

- Replaced Material-UI Select component with Autocomplete for better UX
- Added grouping by channel type (Channels vs Users)
- Maintained existing sorting logic (channels first, then alphabetically)
- Updated styling to allow component to grow while maintaining minimum width
- Simplified value handling with direct object comparison
---
 lib/components/Slack/SlackConnect.tsx | 58 +++++++++++++--------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/lib/components/Slack/SlackConnect.tsx b/lib/components/Slack/SlackConnect.tsx
index 5a5126a..e969ff7 100644
--- a/lib/components/Slack/SlackConnect.tsx
+++ b/lib/components/Slack/SlackConnect.tsx
@@ -2,14 +2,12 @@ import { useContext, useEffect, useState, useCallback } from 'react';
 import {
   Box,
   Button,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
   Typography,
   CircularProgress,
   Alert,
-  Stack
+  Stack,
+  Autocomplete,
+  TextField
 } from '@mui/material';
 import { NotificationAPIContext } from '../Provider/context';
 import { User } from '@notificationapi/core/dist/interfaces';
@@ -361,30 +359,32 @@ export function SlackConnect({
             <Typography variant="body2" color="text.secondary">
               {selectChannelText}
             </Typography>
-            <FormControl sx={{ minWidth: 200 }} size="small">
-              <InputLabel id="slack-channel-label">Channel or User</InputLabel>
-              <Select
-                labelId="slack-channel-label"
-                value={selectedChannel}
-                label="Channel or User"
-                onChange={(e) => setSelectedChannel(e.target.value)}
-              >
-                {channels
-                  .sort((a, b) => {
-                    // Sort channels first, then users
-                    if (a.type === b.type) {
-                      return a.name.localeCompare(b.name);
-                    }
-                    return a.type === 'channel' ? -1 : 1;
-                  })
-                  .map((channel) => (
-                    <MenuItem key={channel.id} value={channel.id}>
-                      {channel.type === 'channel' ? '#' : '@'}
-                      {channel.name}
-                    </MenuItem>
-                  ))}
-              </Select>
-            </FormControl>
+            <Autocomplete
+              disablePortal
+              id="slack-channel-select"
+              options={channels.sort((a, b) => {
+                if (a.type === b.type) {
+                  return a.name.localeCompare(b.name);
+                }
+                return a.type === 'channel' ? -1 : 1;
+              })}
+              groupBy={(option) =>
+                option.type === 'channel' ? 'Channels' : 'Users'
+              }
+              getOptionLabel={(option) =>
+                `${option.type === 'channel' ? '#' : '@'}${option.name}`
+              }
+              sx={{ minWidth: 200, flexGrow: 1 }} // Allow it to grow but keep min width
+              size="small"
+              value={channels.find((c) => c.id === selectedChannel) || null}
+              onChange={(_, newValue) => {
+                setSelectedChannel(newValue ? newValue.id : '');
+              }}
+              isOptionEqualToValue={(option, value) => option.id === value.id}
+              renderInput={(params) => (
+                <TextField {...params} label="Channel or User" />
+              )}
+            />
             <Button
               variant="contained"
               color="primary"

From 709f276ea0c98290ad6bd2e0e5f90f6493cef69e Mon Sep 17 00:00:00 2001
From: Danny Simms <103758200+GreyNewfie@users.noreply.github.com>
Date: Wed, 4 Feb 2026 21:34:00 -0330
Subject: [PATCH 2/2] Add search functionality to Slack channel selection

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a3cd304..beeac72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@notificationapi/react",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notificationapi/react",
-      "version": "1.8.0",
+      "version": "1.9.0",
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
diff --git a/package.json b/package.json
index 910911f..57fa83d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "1.8.0",
+  "version": "1.9.0",
   "type": "module",
   "overrides": {
     "esbuild": "^0.25.0",