Dropdown/dropup configurable

The dropdown/dropup behaviour is now configurable (auto/down/up)
bizzomate · Oct 20, 2023 · fe7ee5e · fe7ee5e
1 parent 150669e
commit fe7ee5e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bizzomatereactselect",
   "widgetName": "BizzomateReactSelect",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "React Select implementation for Mendix",
   "copyright": "© Bizzomate BV 2023. All rights reserved.",
   "author": "Jelle Dekker",

diff --git a/src/BizzomateReactSelect.tsx b/src/BizzomateReactSelect.tsx
@@ -69,7 +69,8 @@ export function BizzomateReactSelect({
     disabledAttr,
     unstyled,
     placeholderText,
-    tabIndex
+    tabIndex,
+    menuPlacement
 }: BizzomateReactSelectContainerProps): ReactElement {
     const [options, setOptions] = useState<readonly MxOption[]>();
     const [value, setValue] = useState<PropsValue<MxOption>>();
@@ -155,7 +156,7 @@ export function BizzomateReactSelect({
     return (
         <Fragment>
             <Select
-                tabIndex={tabIndex}
+                tabIndex={tabIndex ? tabIndex : undefined}
                 options={options}
                 value={value}
                 // @ts-ignore
@@ -166,7 +167,7 @@ export function BizzomateReactSelect({
                 isMulti={isMulti}
                 isDisabled={disabled}
                 unstyled={unstyled}
-                menuPlacement="auto"
+                menuPlacement={menuPlacement}
                 placeholder={placeholder && !disabled ? placeholder : null}
                 className={unstyled ? "mx-compound-control" : undefined}
                 classNamePrefix="react-select"

diff --git a/src/BizzomateReactSelect.xml b/src/BizzomateReactSelect.xml
@@ -53,6 +53,15 @@
         </propertyGroup>
         <propertyGroup caption="Advanced">
             <propertyGroup caption="Appearance">
+                <property key="menuPlacement" type="enumeration" defaultValue="auto">
+                    <caption>Drop down/up</caption>
+                    <description/>
+                    <enumerationValues>
+                        <enumerationValue key="auto">Auto</enumerationValue>
+                        <enumerationValue key="bottom">Drop down</enumerationValue>
+                        <enumerationValue key="top">Drop up</enumerationValue>
+                    </enumerationValues>
+                </property>
                 <property key="unstyled" type="boolean" defaultValue="true">
                     <caption>Unstyled</caption>
                     <description>Removes default styling</description>

diff --git a/src/package.xml b/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="BizzomateReactSelect" version="1.2.5" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BizzomateReactSelect" version="1.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BizzomateReactSelect.xml"/>
         </widgetFiles>

diff --git a/typings/BizzomateReactSelectProps.d.ts b/typings/BizzomateReactSelectProps.d.ts
@@ -5,6 +5,8 @@
  */
 import { ActionValue, DynamicValue, ListValue, ListAttributeValue, ListExpressionValue, ReferenceValue, ReferenceSetValue } from "mendix";
 
+export type MenuPlacementEnum = "auto" | "bottom" | "top";
+
 export interface BizzomateReactSelectContainerProps {
     name: string;
     tabIndex?: number;
@@ -14,6 +16,7 @@ export interface BizzomateReactSelectContainerProps {
     objectsDatasource: ListValue;
     assocCaption: ListExpressionValue<string>;
     onChangeAction?: ActionValue;
+    menuPlacement: MenuPlacementEnum;
     unstyled: boolean;
     searchCaption?: ListExpressionValue<string>;
     disabledAttr?: ListAttributeValue<boolean>;
@@ -26,6 +29,7 @@ export interface BizzomateReactSelectPreviewProps {
     objectsDatasource: {} | { type: string } | null;
     assocCaption: string;
     onChangeAction: {} | null;
+    menuPlacement: MenuPlacementEnum;
     unstyled: boolean;
     searchCaption: string;
     disabledAttr: string;