feat(KB-656): add autoExpand prop to QuickEntryBox for list view
- Add autoExpand prop to QuickEntryBox component (defaults to true for backward compatibility)
- Pass autoExpand={false} from ListView to prevent automatic expansion on focus
- Keep board view with default auto-expand behavior
- Add test coverage for autoExpand={false} behavior
- Add changeset for patch release
This commit is contained in:
@@ -2,4 +2,4 @@
|
|||||||
"@gsxdsm/fusion": patch
|
"@gsxdsm/fusion": patch
|
||||||
---
|
---
|
||||||
|
|
||||||
Add autoExpand prop to QuickEntryBox component to control auto-expand behavior on focus. List view now passes autoExpand={false} to keep the UI clean, while board view continues to auto-expand by default.
|
Add autoExpand prop to QuickEntryBox component to control auto-expand behavior. List view now passes autoExpand={false} to prevent automatic expansion on focus, while board view continues to auto-expand by default.
|
||||||
|
|||||||
@@ -724,6 +724,7 @@ export function ListView({
|
|||||||
availableModels={availableModels}
|
availableModels={availableModels}
|
||||||
onPlanningMode={onPlanningMode}
|
onPlanningMode={onPlanningMode}
|
||||||
onSubtaskBreakdown={onSubtaskBreakdown}
|
onSubtaskBreakdown={onSubtaskBreakdown}
|
||||||
|
autoExpand={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{filteredCount === 0 ? (
|
{filteredCount === 0 ? (
|
||||||
|
|||||||
@@ -22,6 +22,11 @@ interface QuickEntryBoxProps {
|
|||||||
* Called when the user clicks the "Subtask" button to trigger subtask breakdown.
|
* Called when the user clicks the "Subtask" button to trigger subtask breakdown.
|
||||||
*/
|
*/
|
||||||
onSubtaskBreakdown?: (description: string) => void;
|
onSubtaskBreakdown?: (description: string) => void;
|
||||||
|
/**
|
||||||
|
* When false, the component will not auto-expand on focus.
|
||||||
|
* Defaults to true for backward compatibility.
|
||||||
|
*/
|
||||||
|
autoExpand?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getModelSelectionValue(provider?: string, modelId?: string): string {
|
function getModelSelectionValue(provider?: string, modelId?: string): string {
|
||||||
@@ -44,7 +49,7 @@ function parseModelSelection(value: string): { provider?: string; modelId?: stri
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels, onPlanningMode, onSubtaskBreakdown }: QuickEntryBoxProps) {
|
export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels, onPlanningMode, onSubtaskBreakdown, autoExpand = true }: QuickEntryBoxProps) {
|
||||||
const [description, setDescription] = useState(() => {
|
const [description, setDescription] = useState(() => {
|
||||||
if (typeof window !== "undefined") {
|
if (typeof window !== "undefined") {
|
||||||
return localStorage.getItem(STORAGE_KEY) || "";
|
return localStorage.getItem(STORAGE_KEY) || "";
|
||||||
@@ -309,8 +314,11 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
|
|||||||
justResetRef.current = false;
|
justResetRef.current = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setIsExpanded(true);
|
// Only auto-expand if autoExpand prop is true (defaults to true for backward compatibility)
|
||||||
}, []);
|
if (autoExpand) {
|
||||||
|
setIsExpanded(true);
|
||||||
|
}
|
||||||
|
}, [autoExpand]);
|
||||||
|
|
||||||
const handleBlur = useCallback(() => {
|
const handleBlur = useCallback(() => {
|
||||||
// Clear any existing timeout
|
// Clear any existing timeout
|
||||||
|
|||||||
@@ -167,9 +167,6 @@ export function SettingsModal({
|
|||||||
};
|
};
|
||||||
}, [activeSection, loadAuthStatus]);
|
}, [activeSection, loadAuthStatus]);
|
||||||
|
|
||||||
/** Get the scope of the currently active section */
|
|
||||||
const activeSectionScope = SETTINGS_SECTIONS.find((s) => s.id === activeSection)?.scope;
|
|
||||||
|
|
||||||
const handleLogin = useCallback(async (providerId: string) => {
|
const handleLogin = useCallback(async (providerId: string) => {
|
||||||
setAuthActionInProgress(providerId);
|
setAuthActionInProgress(providerId);
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -174,6 +174,16 @@ describe("QuickEntryBox", () => {
|
|||||||
expect(textarea.classList.contains("quick-entry-input--expanded")).toBe(true);
|
expect(textarea.classList.contains("quick-entry-input--expanded")).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("does not expand on focus when autoExpand is false", () => {
|
||||||
|
renderQuickEntryBox({ autoExpand: false });
|
||||||
|
const textarea = screen.getByTestId("quick-entry-input");
|
||||||
|
|
||||||
|
fireEvent.focus(textarea);
|
||||||
|
|
||||||
|
// Should not expand when autoExpand is false
|
||||||
|
expect(textarea.classList.contains("quick-entry-input--expanded")).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
it("collapses on blur when empty", async () => {
|
it("collapses on blur when empty", async () => {
|
||||||
renderQuickEntryBox();
|
renderQuickEntryBox();
|
||||||
const textarea = screen.getByTestId("quick-entry-input");
|
const textarea = screen.getByTestId("quick-entry-input");
|
||||||
|
|||||||
Reference in New Issue
Block a user