fix(channel-web): dropdown not rendering below message (#1764)

Author: davidvitora

modules/channel-web/assets/default-emulator.css

@@ -718,6 +718,11 @@
     margin: 0.2rem 0.5rem;
   }
 
+  .bpw-in-message-quick_reply-dropdown {
+    margin: 0.2rem 0.5rem;
+    width: 200px;
+  }
+
   .bpw-composer {
     position: relative;
     outline: none;

modules/channel-web/assets/default.css

@@ -644,6 +644,11 @@ body {
   margin: 0.2rem 0.5rem;
 }
 
+.bpw-in-message-quick_reply-dropdown {
+  margin: 0.2rem 0.5rem;
+  width: 200px;
+}
+
 .bpw-composer {
   border-top-width: 1px;
   border-top-style: solid;

modules/channel-web/src/views/lite/components/messages/renderer/Dropdown.tsx

@@ -38,7 +38,7 @@ export const Dropdown = (props: Renderer.Dropdown) => {
 
   const renderSelect = inKeyboard => {
     return (
-      <div className={inKeyboard && 'bpw-keyboard-quick_reply-dropdown'}>
+      <div className={(inKeyboard && 'bpw-keyboard-quick_reply-dropdown') || 'bpw-in-message-quick_reply-dropdown'}>
         <div style={{ width: props.width || '100%', display: 'inline-block' }}>
           {props.allowCreation ? (
             <Creatable

modules/hitlnext/assets/webchat-theme.css

@@ -1026,6 +1026,11 @@
     padding: var(--spacing-medium) 0;
     text-transform: uppercase;
   }
+
+  .bpw-in-message-quick_reply-dropdown {
+    margin: 0.2rem 0.5rem;
+    width: 200px;
+  }
 }
 
 .bpw-emulator-header-tab + div {

packages/ui-shared-lite/Payloads/index.ts

@@ -70,12 +70,11 @@ const renderChoicePayload = (content: sdk.ChoiceContent & ExtraChoiceProperties)
       component: 'Dropdown',
       message: content.text,
       buttonText: '',
-      displayInKeyboard: true,
+      displayInKeyboard: !content.displayInMessage,
       options: content.choices.map(c => ({ label: c.title, value: c.value?.toUpperCase() })),
-      width: 300,
+      width: !content.displayInMessage && 300,
       placeholderText: content.dropdownPlaceholder,
-      disableFreeText: content.disableFreeText,
-      displayInMessage: content.displayInMessage
+      disableFreeText: content.disableFreeText
     }
   }
   return {