[Backport 2026.01.xx] #12094: Fix dropdown menu overflow when adding links to text widget in TextEditor

web/client/components/mapviews/settings/CompactRichTextEditor.jsx

@@ -44,6 +44,7 @@ export const resizeBase64Image = (src, options) => {
 function CompactRichTextEditor({
     wrapperClassName = 'ms-compact-text-editor',
     toolbarOptions,
+    linkModalDirection = "auto",
     ...props
 }) {
 
@@ -92,7 +93,9 @@ function CompactRichTextEditor({
                     inDropdown: false,
                     showOpenOptionOnHover: true,
                     defaultTargetOption: '_self',
-                    options: ['link', 'unlink']
+                    options: ['link', 'unlink'],
+                    // popupClassName added to fix dropdown menu overflow when open link text widget. ref: https://github.com/jpuri/react-draft-wysiwyg/issues/664#issuecomment-511354161
+                    popupClassName: linkModalDirection === 'left' ? 'popup-left-link-in-text-editor' : ''
                 },
                 blockType: {
                     inDropdown: true,

web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx

@@ -47,4 +47,20 @@ describe('CompactRichTextEditor component', () => {
         const uploadImgInput = document.querySelector(".rdw-image-modal-upload-option");
         expect(uploadImgInput).toBeTruthy();
     });
+    it('test rendering TextEditor with linkModalDirection set to left', () => {
+        ReactDOM.render(
+            <CompactRichTextEditor linkModalDirection="left" />,
+            document.getElementById("container")
+        );
+        const textEditorContainer = document.querySelector(".ms-compact-text-editor.rdw-editor-wrapper");
+        expect(textEditorContainer).toBeTruthy();
+        const linkWidget = document.querySelector(".rdw-link-wrapper .rdw-option-wrapper");
+        TestUtils.act(() => {
+            TestUtils.Simulate.click(linkWidget);
+        });
+        const linkModal = document.querySelector(".rdw-link-modal");
+        expect(linkModal).toBeTruthy();
+        // Check that modal is positioned to the left
+        expect(linkModal.classList.contains('popup-left-link-in-text-editor')).toBeTruthy();
+    });
 });

web/client/components/widgets/builder/wizard/TextWizard.jsx

@@ -18,7 +18,8 @@ const Wizard = wizardHandlers(WizardContainer);
 export default ({
     onChange = () => {}, onFinish = () => {}, setPage = () => {},
     step = 0,
-    editorData = {}
+    editorData = {},
+    linkModalDirection = "auto"
 } = {}) => (
     <Wizard
         step={step}
@@ -29,6 +30,7 @@ export default ({
             key="widget-options"
             data={editorData}
             onChange={onChange}
+            linkModalDirection={linkModalDirection}
         />
     </Wizard>
 );

web/client/components/widgets/builder/wizard/text/TextOptions.jsx

@@ -23,7 +23,7 @@ const DescriptorEditor = withDebounceOnCallback(
     "editorState"
 )(CompactRichTextEditor);
 
-function TextOptions({ data = {}, onChange = () => {} }) {
+function TextOptions({ data = {}, onChange = () => {}, linkModalDirection = "auto" }) {
     const [editorState, setEditorState] = useState(
         htmlToDraftJSEditorState(data.text || "")
     );
@@ -48,6 +48,7 @@ function TextOptions({ data = {}, onChange = () => {} }) {
                 </Form>
             </Col>
             <DescriptorEditor
+                linkModalDirection={linkModalDirection}
                 uploadEnabled
                 editorState={editorState}
                 onEditorStateChange={(newEditorState) => {

web/client/plugins/Annotations/components/AnnotationsFields.jsx

@@ -97,6 +97,7 @@ function AnnotationsFields({
                             </ControlLabel>}
                             {isEditable
                                 ? <DescriptionEditor
+                                    linkModalDirection={'left'}
                                     editorState={editorState[field.name]}
                                     onEditorStateChange={(newEditorState) => {
                                         const previousHTML = draftJSEditorStateToHtml(editorState[field.name]);

web/client/plugins/DashboardEditor.jsx

@@ -107,6 +107,7 @@ class DashboardEditorComponent extends React.Component {
                     enabled={this.props.editing}
                     onClose={() => this.props.setEditing(false)}
                     catalog={this.props.catalog}
+                    linkModalDirection={"left"}
                 />
             </div>
             : false;

web/client/plugins/widgetbuilder/TextBuilder.jsx

@@ -43,9 +43,9 @@ const Builder = connect(
     wizardStateToProps
 )(TextWizardComp);
 
-export default ({ enabled, onClose = () => {}} = {}) =>
+export default ({ enabled, onClose = () => {}, linkModalDirection = "auto"} = {}) =>
     (<BorderLayout
         header={<BuilderHeader onClose={onClose}><Toolbar /></BuilderHeader>}
     >
-        {enabled ? <Builder /> : null}
+        {enabled ? <Builder linkModalDirection={linkModalDirection} /> : null}
     </BorderLayout>);

web/client/themes/default/less/common.less

@@ -363,6 +363,12 @@ div#sync-popover.popover {
         font-style: italic;
     }
 }
+.rdw-editor-wrapper{
+    .popup-left-link-in-text-editor{
+        left: initial !important;
+        right: 5px;
+    }
+}
 
 
 .DraftEditor-editorContainer, // selector editor