From 657ee2c6bd63b338853f796fbfaff847e4b071bd Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 28 Jan 2024 21:47:09 -0500
Subject: [PATCH] fix: Allow value prop to change select

---
 app/components/InputSelect.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/InputSelect.tsx b/app/components/InputSelect.tsx
index 5e73300c8..cbdf45877 100644
--- a/app/components/InputSelect.tsx
+++ b/app/components/InputSelect.tsx
@@ -106,6 +106,10 @@ const InputSelect = (props: Props) => {
     (option) => option.value === select.selectedValue
   );
 
+  React.useEffect(() => {
+    select.setSelectedValue(value);
+  }, [value]);
+
   React.useEffect(() => {
     if (previousValue.current === select.selectedValue) {
       return;
@@ -163,6 +167,7 @@ const InputSelect = (props: Props) => {
                   topAnchor={topAnchor}
                   rightAnchor={rightAnchor}
                   hiddenScrollbars
+                  maxWidth={400}
                   style={
                     maxHeight && topAnchor
                       ? {
@@ -244,8 +249,8 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
 
   ${Inner} {
     line-height: 28px;
-    padding-left: 16px;
-    padding-right: 8px;
+    padding-left: 12px;
+    padding-right: 4px;
   }
 
   svg {
@@ -267,7 +272,7 @@ const Wrapper = styled.label<{ short?: boolean }>`
   max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;
 
-const Positioner = styled(Position)`
+export const Positioner = styled(Position)`
   &.focus-visible {
     ${StyledSelectOption} {
       &[aria-selected="true"] {