From 42e53c8efcfcb1a1f0d8a2f037b694b06a580088 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Sat, 24 Aug 2024 04:34:35 +0300
Subject: [PATCH] fix: correctly display versions list in Select component fix:
 was unable to create new worlds by pressing Enter

---
 src/react/CreateWorld.tsx       |  2 +-
 src/react/Select.stories.tsx    |  2 +-
 src/react/Select.tsx            | 12 ++++++------
 src/react/SelectGameVersion.tsx |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/react/CreateWorld.tsx b/src/react/CreateWorld.tsx
index 698d5d09..0ff34a39 100644
--- a/src/react/CreateWorld.tsx
+++ b/src/react/CreateWorld.tsx
@@ -81,7 +81,7 @@ export default ({ cancelClick, createClick, customizeClick, versions, defaultVer
       </Button>
       <Button disabled={!title} onClick={createClick}>Create</Button>
     </div>
-    <div className='muted' style={{ fontSize: 9 }}>Note: store important saves in folders on the drive!</div>
+    <div className='muted' style={{ fontSize: 9 }}>Note: save important worlds in folders on your hard drive!</div>
     <div className='muted' style={{ fontSize: 9 }}>{quota}</div>
   </Screen>
 }
diff --git a/src/react/Select.stories.tsx b/src/react/Select.stories.tsx
index 19ada27a..f50b8c6a 100644
--- a/src/react/Select.stories.tsx
+++ b/src/react/Select.stories.tsx
@@ -14,7 +14,7 @@ export const Primary: Story = {
   args: {
     initialOptions: [{ value: '1', label: 'option 1' }, { value: '2', label: 'option 2' }, { value: '3', label: 'option 3' },],
     updateOptions (options) {},
-    processInput (input) {
+    getCssOnInput (input) {
       console.log('input:', input)
       if (input === 'option 3') return { border: '1px solid yellow' } as CSSProperties
     },
diff --git a/src/react/Select.tsx b/src/react/Select.tsx
index f4285330..7fe8aaea 100644
--- a/src/react/Select.tsx
+++ b/src/react/Select.tsx
@@ -13,7 +13,7 @@ export interface OptionStorage {
 interface Props {
   initialOptions: OptionStorage[]
   updateOptions: (options: string) => void
-  processInput?: (input: string) => CSSProperties | undefined
+  getCssOnInput?: (input: string) => CSSProperties | undefined
   processOption?: (option: string) => string
   onValueChange?: (newVal: string) => void
   defaultValue?: { value: string, label: string }
@@ -27,7 +27,7 @@ interface Props {
 export default ({
   initialOptions,
   updateOptions,
-  processInput,
+  getCssOnInput,
   onValueChange,
   defaultValue,
   containerStyle,
@@ -40,7 +40,6 @@ export default ({
 
   return <Creatable
     options={initialOptions}
-    aria-invalid="true"
     defaultValue={defaultValue}
     blurInputOnSelect={true}
     hideSelectedOptions={false}
@@ -56,7 +55,7 @@ export default ({
       setInputValue(e?.label)
       onValueChange?.(e?.value ?? '')
       updateOptions?.(e?.value ?? '')
-      setInputStyle(processInput?.(e?.value ?? '') ?? {})
+      setInputStyle(getCssOnInput?.(e?.value ?? '') ?? {})
     }}
     onInputChange={(e) => {
       setIsFirstClick(false)
@@ -72,6 +71,7 @@ export default ({
     onMenuOpen={() => {
       setIsFirstClick(true)
     }}
+    menuPortalTarget={document.body}
     classNames={{
       control (state) {
         return styles.container
@@ -84,7 +84,8 @@ export default ({
       }
     }}
     styles={{
-      container (base, state) { return { ...base, position: 'relative' } },
+      menuPortal (base, state) { return { ...base, zIndex: 10, transform: 'scale(var(--guiScale))', transformOrigin: 'top left' } },
+      container (base, state) { return { ...base, position: 'relative', zIndex: 10 } },
       control (base, state) { return { ...containerStyle, ...inputStyle } },
       menu (base, state) { return { position: 'absolute', zIndex: 10 } },
       option (base, state) {
@@ -106,4 +107,3 @@ export default ({
     }}
   />
 }
-
diff --git a/src/react/SelectGameVersion.tsx b/src/react/SelectGameVersion.tsx
index 4944faa5..ec8c9726 100644
--- a/src/react/SelectGameVersion.tsx
+++ b/src/react/SelectGameVersion.tsx
@@ -23,7 +23,7 @@ export default (
     }}
     onValueChange={onChange}
     containerStyle={containerStyle ?? { width: '190px' }}
-    processInput={(value) => {
+    getCssOnInput={(value) => {
       if (!versions || !value) return {}
       const parsedsupportedVersions = versions.map(x => x.value.split('.').map(Number))
       const parsedValue = value.split('.').map(Number)