fix: focus is lost after renaming
Massimo Melina committed
Apr 29, 2024 at 22:33 UTC
3b788f01505a57bd0862fa08e7c2c125bb6e8207
3 files changed
+7
-5
frontend/src/BrowseFiles.ts
+1
-1
@@ -113,7 +113,7 @@ function FilesList() {
113
msgInstead ? h('p', {}, msgInstead)
114
: theList.slice(offset, offset + pageSize * (1+extraPages)).map((entry, idx) =>
115
h(Entry, {
116
- key: entry.n,
116
+ key: entry.key || entry.n,
117
midnight,
118
separator: idx > 0 && !(idx % pageSize) ? String(offset + idx) : undefined,
119
entry,
frontend/src/fileMenu.ts
+5
-4
@@ -120,19 +120,20 @@ async function rename(entry: DirEntry) {
120
try {
121
const { n, uri } = entry
122
await apiCall('rename', { uri, dest }, { modal: working })
123
- const isCurrentFolder = uri === location.pathname
124
- if (!isCurrentFolder) {
123
+ const renamingCurrentFolder = uri === location.pathname
124
+ if (!renamingCurrentFolder) {
125
// update state instead of re-getting the list
126
const newN = n.replace(/(.*?)[^/]+(\/?)$/, (_,before,after) => before + dest + after)
127
- const newEntry = new DirEntry(newN, entry)
127
+ const newEntry = new DirEntry(newN, { key: n, ...entry }) // by keeping old key, we avoid unmounting the element, that's causing focus lost
128
const i = _.findIndex(state.list, { n })
129
state.list[i] = newEntry
130
+ // update filteredList too
131
const j = _.findIndex(state.filteredList, { n })
132
if (j >= 0)
133
state.filteredList![j] = newEntry
134
}
135
alertDialog(t`Operation successful`).then(() => {
135
- if (isCurrentFolder)
136
+ if (renamingCurrentFolder)
137
getHFS().navigate(uri + '../' + pathEncode(dest) + '/')
138
})
139
}
frontend/src/state.ts
+1
@@ -102,6 +102,7 @@ export class DirEntry {
102
public readonly isFolder:boolean
103
public readonly t?:Date
104
public readonly cantOpen: boolean
105
+ public readonly key?: string
106
107
constructor(n: string, rest?: any) {
108
Object.assign(this, rest) // we actually allow any custom property to be memorized