codeant-ai-for-open-source[bot] commented on code in PR #38524:
URL: https://github.com/apache/superset/pull/38524#discussion_r2906904443
##########
superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx:
##########
@@ -105,15 +105,21 @@ export function EditableTitle({
return 0;
}
- useEffect(() => {
+ useLayoutEffect(() => {
const { font } = window.getComputedStyle(
contentRef.current?.resizableTextArea?.textArea || document.body,
);
const textWidth = measureTextWidth(currentTitle || '', font);
const padding = 20;
const maxAllowedWidth = typeof maxWidth === 'number' ? maxWidth : Infinity;
setInputWidth(Math.min(textWidth + padding, maxAllowedWidth));
- }, [currentTitle]);
+ }, [currentTitle, canEdit, maxWidth]);
Review Comment:
**Suggestion:** The input width is measured using only the internal
`currentTitle` state, so when the displayed text comes from `defaultTitle` or
`title` (e.g., newly added tabs whose `currentTitle` is empty), the measured
width is too small and the tab underline/ink bar will not match the visible
label; measure the actual displayed text instead and add the relevant props to
the effect dependencies. [logic error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ New dashboard tabs show misaligned label and underline widths.
- ⚠️ Any EditableTitle using defaultTitle renders with incorrect width.
```
</details>
```suggestion
useLayoutEffect(() => {
const textElement =
contentRef.current?.resizableTextArea?.textArea || document.body;
const { font } = window.getComputedStyle(textElement);
// Use the same logic as the rendered value: fall back to defaultTitle
or title when currentTitle is empty
const textToMeasure =
currentTitle || defaultTitle || title || '';
const textWidth = measureTextWidth(textToMeasure, font);
const padding = 20;
const maxAllowedWidth = typeof maxWidth === 'number' ? maxWidth :
Infinity;
setInputWidth(Math.min(textWidth + padding, maxAllowedWidth));
}, [currentTitle, defaultTitle, title, maxWidth]);
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Start the Superset frontend in development mode and open any dashboard in
edit mode so
that dashboard tabs are visible.
2. Add a new dashboard tab and do not type a custom title; the tab header
uses
`EditableTitle` from
`superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx`
with
`title === ''`, `defaultTitle` set (e.g. "New tab"), and `editing === false`.
3. On initial render, `EditableTitle` initializes `currentTitle` from
`title` (empty) at
lines 92–95 and computes the displayed `value` as `defaultTitle || title`
when `!isEditing
&& !currentTitle` at lines around 148–152, so the user sees the non-empty
default label.
4. However, the width calculation in `useLayoutEffect` at lines 108–116 uses
`measureTextWidth(currentTitle || '', font)`, so with `currentTitle === ''`
it measures an
empty string and sets `inputWidth` to just padding (~20px); the textarea
style `width:
${inputWidth}px` (lines ~170–180) makes the tab label/underline far narrower
than the
visible text, causing the misaligned ink bar for newly added tabs.
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx
**Line:** 108:116
**Comment:**
*Logic Error: The input width is measured using only the internal
`currentTitle` state, so when the displayed text comes from `defaultTitle` or
`title` (e.g., newly added tabs whose `currentTitle` is empty), the measured
width is too small and the tab underline/ink bar will not match the visible
label; measure the actual displayed text instead and add the relevant props to
the effect dependencies.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38524&comment_hash=acf90ead5fcf94dce94d63a914f35556e8a6270339a87ddf196bec0e60fb918b&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38524&comment_hash=acf90ead5fcf94dce94d63a914f35556e8a6270339a87ddf196bec0e60fb918b&reaction=dislike'>👎</a>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
