Skip to content

Commit 97e9f56

Browse files
jfox-boxjfox-box
committed
fix: The final fix
1 parent f13e5b4 commit 97e9f56

File tree

11 files changed

+54
-83
lines changed

11 files changed

+54
-83
lines changed

‎src/components/context-menu/ContextMenu.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,12 +173,16 @@ class ContextMenu extends React.Component<ContextMenuProps, ContextMenuState> {
173173
renderElementTo={document.body}
174174
renderTarget={ref => {
175175
return React.isValidElement(menuTarget) ? (
176-
<span ref={ref}>{React.cloneElement(menuTarget, menuTargetProps)}</span>
176+
<div ref={ref} style={{ display: 'inline-block' }}>
177+
{React.cloneElement(menuTarget, menuTargetProps)}
178+
</div>
177179
) : null;
178180
}}
179181
renderElement={ref => {
180182
return isOpen && React.isValidElement(menu) ? (
181-
<span ref={ref}>{React.cloneElement(menu, menuProps)}</span>
183+
<div ref={ref} style={{ display: 'inline-block' }}>
184+
{React.cloneElement(menu, menuProps)}
185+
</div>
182186
) : null;
183187
}}
184188
/>

‎src/components/dropdown-menu/DropdownMenu.js‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -271,21 +271,16 @@ class DropdownMenu extends React.Component<Props, State> {
271271
renderElementTo={bodyEl}
272272
targetAttachment={tetherTargetAttachment || targetAttachment}
273273
renderTarget={ref => (
274-
<span
275-
ref={node => {
276-
if (!node) {
277-
ref.current = null;
278-
return;
279-
}
280-
const first = node.querySelector('*') || node.firstElementChild;
281-
ref.current = first;
282-
}}
283-
>
274+
<div ref={ref} style={{ display: 'inline-block' }}>
284275
{React.cloneElement(menuButton, menuButtonProps)}
285-
</span>
276+
</div>
286277
)}
287278
renderElement={ref => {
288-
return isOpen ? <span ref={ref}>{React.cloneElement(menu, menuProps)}</span> : null;
279+
return isOpen ? (
280+
<div ref={ref} style={{ display: 'inline-block' }}>
281+
{React.cloneElement(menu, menuProps)}
282+
</div>
283+
) : null;
289284
}}
290285
/>
291286
);

‎src/components/flyout/Flyout.js‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -491,26 +491,17 @@ class Flyout extends React.Component<Props, State> {
491491
<TetherComponent
492492
{...tetherProps}
493493
renderTarget={ref => (
494-
<span
495-
ref={node => {
496-
if (!node) {
497-
ref.current = null;
498-
return;
499-
}
500-
const first = node.querySelector('*') || node.firstElementChild;
501-
ref.current = first;
502-
}}
503-
>
494+
<div ref={ref} style={{ display: 'inline-block' }}>
504495
{React.cloneElement(overlayButton, overlayButtonProps)}
505-
</span>
496+
</div>
506497
)}
507498
renderElement={ref => {
508499
return isVisible ? (
509-
<span ref={ref}>
500+
<div ref={ref} style={{ display: 'inline-block' }}>
510501
<FlyoutContext.Provider value={{ closeOverlay: this.closeOverlay }}>
511502
{React.cloneElement(overlayContent, overlayProps)}
512503
</FlyoutContext.Provider>
513-
</span>
504+
</div>
514505
) : null;
515506
}}
516507
/>

‎src/components/radar/RadarAnimation.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ class RadarAnimation extends React.Component<RadarAnimationProps> {
131131

132132
const tetherProps: Pick<
133133
TetherProps,
134-
'attachment' | 'targetAttachment' | 'constraints' | 'renderElementTo' | 'classPrefix' | 'enabled'
134+
'attachment' | 'targetAttachment' | 'constraints' | 'classPrefix' | 'enabled'
135135
> & {
136136
offset?: string;
137137
className?: string;
@@ -141,7 +141,6 @@ class RadarAnimation extends React.Component<RadarAnimationProps> {
141141
constraints,
142142
enabled: isShown,
143143
targetAttachment,
144-
renderElementTo: document.body,
145144
};
146145

147146
if (tetherElementClassName) {
@@ -156,23 +155,12 @@ class RadarAnimation extends React.Component<RadarAnimationProps> {
156155
<TetherComponent
157156
ref={this.tetherRef}
158157
{...tetherProps}
159-
renderTarget={(ref: React.MutableRefObject<HTMLElement>) => (
160-
<span
161-
ref={node => {
162-
if (!node) {
163-
ref.current = null;
164-
return;
165-
}
166-
const firstChild =
167-
(node.querySelector('*') as HTMLElement | null) ||
168-
(node.firstElementChild as HTMLElement | null);
169-
ref.current = firstChild;
170-
}}
171-
>
158+
renderTarget={ref => (
159+
<div ref={ref} style={{ display: 'inline-block' }}>
172160
{referenceElement}
173-
</span>
161+
</div>
174162
)}
175-
renderElement={(ref: React.RefObject<HTMLDivElement>) => (
163+
renderElement={ref => (
176164
<div ref={ref} className={`radar ${className}`} id={this.radarAnimationID} {...rest}>
177165
<div className="radar-dot" />
178166
<div className="radar-circle" />

‎src/components/tooltip/Tooltip.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -388,24 +388,13 @@ class Tooltip extends React.Component<TooltipProps, State> {
388388
{...tetherProps}
389389
ref={this.tetherRef}
390390
renderElementTo={bodyEl ?? (document.body as HTMLElement)}
391-
renderTarget={(ref: React.MutableRefObject<HTMLElement>) => {
391+
renderTarget={(ref: React.RefObject<HTMLDivElement>) => {
392392
const child = React.Children.only(children);
393-
return (
394-
<span
395-
ref={node => {
396-
if (!node) {
397-
ref.current = null;
398-
return;
399-
}
400-
const first =
401-
(node.querySelector('*') as HTMLElement | null) ||
402-
(node.firstElementChild as HTMLElement | null);
403-
ref.current = first;
404-
}}
405-
>
393+
return child ? (
394+
<div ref={ref} style={{ display: 'inline-block' }}>
406395
{React.cloneElement(child as React.ReactElement, componentProps)}
407-
</span>
408-
);
396+
</div>
397+
) : null;
409398
}}
410399
renderElement={renderTooltip}
411400
/>

‎src/elements/content-sidebar/activity-feed/annotations/AnnotationActivity.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ const AnnotationActivity = ({
201201
<TetherComponent
202202
{...tetherProps}
203203
renderTarget={ref => (
204-
<span ref={ref}>
204+
<div ref={ref} style={{ display: 'inline-block' }}>
205205
{isMenuVisible && (
206206
<AnnotationActivityMenu
207207
canDelete={canDelete}
@@ -218,11 +218,11 @@ const AnnotationActivity = ({
218218
onStatusChange={handleStatusChange}
219219
/>
220220
)}
221-
</span>
221+
</div>
222222
)}
223223
renderElement={ref => {
224224
return isConfirmingDelete ? (
225-
<span ref={ref}>
225+
<div ref={ref} style={{ display: 'inline-block' }}>
226226
{isConfirmingDelete && (
227227
<DeleteConfirmation
228228
data-resin-component={ACTIVITY_TARGETS.ANNOTATION_OPTIONS}
@@ -232,7 +232,7 @@ const AnnotationActivity = ({
232232
onDeleteConfirm={handleDeleteConfirm}
233233
/>
234234
)}
235-
</span>
235+
</div>
236236
) : null;
237237
}}
238238
/>

‎src/elements/content-sidebar/activity-feed/app-activity/AppActivity.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -147,25 +147,25 @@ class AppActivity extends React.PureComponent<Props, State> {
147147
constraints={[{ to: 'scrollParent', attachment: 'together' }]}
148148
targetAttachment="bottom right"
149149
renderTarget={ref => (
150-
<span ref={ref}>
150+
<div ref={ref} style={{ display: 'inline-block' }}>
151151
<Media.Menu isDisabled={isConfirmingDelete}>
152152
<MenuItem onClick={this.handleDeleteClick}>
153153
<IconTrash color={bdlGray80} />
154154
<FormattedMessage {...messages.appActivityDeleteMenuItem} />
155155
</MenuItem>
156156
</Media.Menu>
157-
</span>
157+
</div>
158158
)}
159159
renderElement={ref => {
160160
return isConfirmingDelete ? (
161-
<span ref={ref}>
161+
<div ref={ref} style={{ display: 'inline-block' }}>
162162
<DeleteConfirmation
163163
isOpen={isConfirmingDelete}
164164
message={messages.appActivityDeletePrompt}
165165
onDeleteCancel={this.handleDeleteCancel}
166166
onDeleteConfirm={this.handleDeleteConfirm}
167167
/>
168-
</span>
168+
</div>
169169
) : null;
170170
}}
171171
/>

‎src/elements/content-sidebar/activity-feed/comment/Comment.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ class Comment extends React.Component<Props, State> {
186186
constraints={[{ to: 'scrollParent', attachment: 'together' }]}
187187
targetAttachment="bottom right"
188188
renderTarget={ref => (
189-
<span ref={ref}>
189+
<div ref={ref} style={{ display: 'inline-block' }}>
190190
<Media.Menu
191191
isDisabled={isConfirmingDelete}
192192
data-testid="comment-actions-menu"
@@ -240,19 +240,19 @@ class Comment extends React.Component<Props, State> {
240240
</MenuItem>
241241
)}
242242
</Media.Menu>
243-
</span>
243+
</div>
244244
)}
245245
renderElement={ref => {
246246
return isConfirmingDelete ? (
247-
<span ref={ref}>
247+
<div ref={ref} style={{ display: 'inline-block' }}>
248248
<DeleteConfirmation
249249
data-resin-component={ACTIVITY_TARGETS.COMMENT_OPTIONS}
250250
isOpen={isConfirmingDelete}
251251
message={messages.commentDeletePrompt}
252252
onDeleteCancel={this.handleDeleteCancel}
253253
onDeleteConfirm={this.handleDeleteConfirm}
254254
/>
255-
</span>
255+
</div>
256256
) : null;
257257
}}
258258
/>

‎src/elements/content-sidebar/activity-feed/comment/components/BaseCommentMenu.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ export const BaseCommentMenu = ({
5454
className="bcs-Comment-deleteConfirmationModal"
5555
constraints={[{ to: 'scrollParent', attachment: 'together' }]}
5656
targetAttachment="bottom right"
57-
renderTarget={(ref: React.RefObject<HTMLDivElement>) => (
58-
<span ref={ref}>
57+
renderTarget={ref => (
58+
<div ref={ref} style={{ display: 'inline-block' }}>
5959
<Media.Menu
6060
className="bcs-BaseCommentMenu"
6161
data-testid="comment-actions-menu"
@@ -111,19 +111,19 @@ export const BaseCommentMenu = ({
111111
</MenuItem>
112112
)}
113113
</Media.Menu>
114-
</span>
114+
</div>
115115
)}
116-
renderElement={(ref: React.RefObject<HTMLElement>) => {
116+
renderElement={ref => {
117117
return isConfirmingDelete ? (
118-
<span ref={ref}>
118+
<div ref={ref} style={{ display: 'inline-block' }}>
119119
<DeleteConfirmation
120120
data-resin-component={ACTIVITY_TARGETS.COMMENT_OPTIONS}
121121
isOpen={isConfirmingDelete}
122122
message={messages.commentDeletePrompt}
123123
onDeleteCancel={handleDeleteCancel}
124124
onDeleteConfirm={handleDeleteConfirm}
125125
/>
126-
</span>
126+
</div>
127127
) : null;
128128
}}
129129
/>

‎src/elements/content-sidebar/activity-feed/task-new/Task.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ class Task extends React.Component<Props, State> {
294294
constraints={[{ to: 'scrollParent', attachment: 'together' }]}
295295
targetAttachment="bottom right"
296296
renderTarget={ref => (
297-
<span ref={ref}>
297+
<div ref={ref} style={{ display: 'inline-block' }}>
298298
<Media.Menu
299299
isDisabled={isConfirmingDelete}
300300
data-testid="task-actions-menu"
@@ -323,19 +323,19 @@ class Task extends React.Component<Props, State> {
323323
</MenuItem>
324324
)}
325325
</Media.Menu>
326-
</span>
326+
</div>
327327
)}
328328
renderElement={ref => {
329329
return isConfirmingDelete ? (
330-
<span ref={ref}>
330+
<div ref={ref} style={{ display: 'inline-block' }}>
331331
<DeleteConfirmation
332332
data-resin-component={ACTIVITY_TARGETS.TASK_OPTIONS}
333333
isOpen={isConfirmingDelete}
334334
message={messages.taskDeletePrompt}
335335
onDeleteCancel={this.handleDeleteCancel}
336336
onDeleteConfirm={this.handleDeleteConfirm}
337337
/>
338-
</span>
338+
</div>
339339
) : null;
340340
}}
341341
/>

0 commit comments

Comments
 (0)