sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(lists): typing into the shopping list on phones
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 2m1s
Details

Browse Source 
The + button and the menu entry focused the new-item field 60 ms after
the tap; iOS only opens the keyboard for focus() inside the user gesture,
so the field was selected but nothing could be typed. Focus now happens
right in the tap. The list inputs use 16px on phones, so iOS no longer
zooms in and pushes the field under the keyboard. Version 0.5.2.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-10-29 17:28:43 +01:00
1 parent 3c31a22ba0
commit 6cbfedd013
3 files changed
+16 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/lists/SharedListsView.tsx
+13 -12
View File
@@ -766,13 +766,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
return result;
}, [openItems]);
const focusNewItemInput = () => {
inputRef.current?.focus({ preventScroll: true });
inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
};
// Register context-sensitive mobile menu groups behind the MindSift logo
useEffect(() => {
setPrimaryAction(() => {
setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 60);
// Focus right inside the tap: iOS only opens the keyboard for focus() during the user gesture
focusNewItemInput();
});
setGroups([
@@ -786,10 +789,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
icon: <Plus className="w-4 h-4 text-accent" />,
variant: 'accent',
onClick: () => {
setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 60);
focusNewItemInput();
},
},
{
@@ -1081,7 +1081,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
setTimeout(() => setShowSuggestions(false), 200);
}}
placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch #Kühlregal)…`}
className="flex-1 bg-transparent py-1.5 sm:py-1 text-sm text-main placeholder-faint focus:outline-none"
// 16px on phones: iOS zooms into smaller fields and the layout jumps under the keyboard
className="flex-1 bg-transparent py-1.5 sm:py-1 text-base sm:text-sm text-main placeholder-faint focus:outline-none"
/>
{/* Hashtag Autocomplete Suggestions Dropdown */}
@@ -1125,7 +1126,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
value={newItemQty}
onChange={(e) => setNewItemQty(e.target.value.replace(/[^0-9.,xX]/g, ''))}
placeholder="Menge (z.B. 2)"
className="flex-1 sm:flex-none sm:w-28 h-9 sm:h-7 px-2.5 sm:px-2 input-field text-xs"
className="flex-1 sm:flex-none sm:w-28 h-11 sm:h-7 px-2.5 sm:px-2 input-field text-base sm:text-xs"
/>
<button
type="submit"
@@ -1252,7 +1253,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onBlur={async () => {
await handleSaveQuantity(item.id, editingQtyValue);
}}
className="w-16 h-6 px-1.5 text-xs input-field font-semibold text-accent text-center"
className="w-16 h-8 sm:h-6 px-1.5 text-base sm:text-xs input-field font-semibold text-accent text-center"
placeholder="Menge"
/>
</div>
@@ -1366,7 +1367,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
onBlur={async () => {
await handleSaveQuantity(item.id, editingQtyValue);
}}
className="w-16 h-6 px-1.5 text-xs input-field font-semibold text-accent text-center"
className="w-16 h-8 sm:h-6 px-1.5 text-base sm:text-xs input-field font-semibold text-accent text-center"
placeholder="Menge"
/>
</div>