Merge pull request #1310 from priya-tik/event-details-comments-dropdown-fix

Event details comments dropdown fix

Author: Arnei

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
 /build
+.idea/

src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import {
 	getComments,
 	getCommentReasons,
@@ -60,7 +60,7 @@ const EventDetailsCommentsTab = ({
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const saveComment = (commentText: string, commentReason: string) => {
-		dispatch(saveNewComment({ eventId, commentText, commentReason })).then(successful => {
+		dispatch(saveNewComment({eventId, commentText, commentReason})).then(successful => {
 			if (successful) {
 				dispatch(fetchComments(eventId));
 				setNewCommentText("");
@@ -84,7 +84,7 @@ const EventDetailsCommentsTab = ({
 	};
 
 	const saveReply = (originalComment: Comment, reply: string, isResolved: boolean) => {
-		dispatch(saveNewCommentReply({ eventId, commentId: originalComment.id, replyText: reply, commentResolved: isResolved })).then(
+		dispatch(saveNewCommentReply({eventId, commentId: originalComment.id, replyText: reply, commentResolved: isResolved})).then(
 			success => {
 				if (success) {
 					dispatch(fetchComments(eventId));
@@ -95,15 +95,15 @@ const EventDetailsCommentsTab = ({
 	};
 
 	const deleteComment = (comment: Comment) => {
-		dispatch(deleteOneComment({ eventId, commentId: comment.id })).then(success => {
+		dispatch(deleteOneComment({eventId, commentId: comment.id})).then(success => {
 			if (success) {
 				dispatch(fetchComments(eventId));
 			}
 		});
 	};
 
 	const deleteReply = (comment: Comment, reply: CommentReply) => {
-		dispatch(deleteCommentReply({ eventId, commentId: comment.id, replyId: reply.id })).then(success => {
+		dispatch(deleteCommentReply({eventId, commentId: comment.id, replyId: reply.id})).then(success => {
 			if (success) {
 				dispatch(fetchComments(eventId));
 			}
@@ -251,13 +251,13 @@ const EventDetailsCommentsTab = ({
 										required={true}
 										handleChange={element => {
 											if (element) {
-												setCommentReason(element.value);
+												setCommentReason(element.value)
 											}
 										}}
 										placeholder={t(
 											"EVENTS.EVENTS.DETAILS.COMMENTS.SELECTPLACEHOLDER",
 										)}
-										customCSS={{ width: 200, optionPaddingTop: 5, optionLineHeight: "105%" }}
+										customCSS={{width: 200, optionPaddingTop: 5, optionLineHeight: "105%"}}
 									/>
 								</div>
 
@@ -363,7 +363,7 @@ const EventDetailsCommentsTab = ({
 											originalComment,
 											commentReplyText,
 											commentReplyIsResolved,
-										);
+										)
 									}
 								}}
 							>

src/components/shared/DropDown.tsx

@@ -33,6 +33,7 @@ const DropDown = <T, >({
 	creatable = false,
 	disabled = false,
 	menuIsOpen = undefined,
+	menuPlacement = "auto",
 	handleMenuIsOpen = undefined,
 	customCSS,
 }: {
@@ -51,6 +52,7 @@ const DropDown = <T, >({
 	disabled?: boolean,
 	menuIsOpen?: boolean,
 	handleMenuIsOpen?: (open: boolean) => void,
+	menuPlacement?: 'auto' | 'top' | 'bottom',
 	customCSS?: {
 		isMetadataStyle?: boolean,
 		width?: number | string,
@@ -75,14 +77,14 @@ const DropDown = <T, >({
 		if (handleMenuIsOpen !== undefined) {
 			handleMenuIsOpen(open);
 		}
-	};
+	}
 
 	const formatOptions = (
 		unformattedOptions: DropDownOption[],
 		required: boolean,
 	) => {
 		// Translate?
-		unformattedOptions = unformattedOptions.map(option => ({ ...option, label: t(option.label as ParseKeys) }));
+		unformattedOptions = unformattedOptions.map(option => ({...option, label: t(option.label as ParseKeys)}));
 
 		// Add "No value" option
 		if (!required) {
@@ -106,14 +108,14 @@ const DropDown = <T, >({
 			unformattedOptions.sort((a, b) => JSON.parse(a.label).order - JSON.parse(b.label).order);
 		} else {
 			// Apply alphabetical ordering.
-			unformattedOptions.sort((a, b) => a.label.localeCompare(b.label));
+			unformattedOptions.sort((a, b) => a.label.localeCompare(b.label))
 		}
 
 		return unformattedOptions;
 	};
 
-
   const commonProps: Props = {
+	  	menuPlacement: menuPlacement ?? 'auto',
 		tabIndex: tabIndex,
 		theme: theme => (dropDownSpacingTheme(theme)),
 		styles: style,