Folder doesn't get reloaded when it is renamed.
- Dominant language
- TypeScript
- Stars
- 551
- Forks
- 351
- Avg merge
- 5d 9h
- Merged PRs (30d)
- 31
Description
**Environment:**
React with vite, using script to load box explorer
- Elements version:
- Box Content Explorer 23.0.0
**Desktop (please complete the following information):**
- OS: mac OS 15.5
- Browser: chrome
- Version: 138.0.7204.185
**Steps to reproduce the problem:**
- Create a folder
- Add a file inside the folder
- Go back and rename the folder
- The folder won't get renamed, need to refresh.
**What is the expected behavior? (Screenshots can be helpful here)**
Folder should be renamed in real time.
**What went wrong? (Screenshots, console logs, or HAR files can be helpful here)**
https://github.com/user-attachments/assets/9507b85c-650f-44bf-8fb2-4c6af94b17e3
**Link to application or sample code:**
```
import React, { useEffect } from "react";
import { useHandleBoxToken } from "~/hooks";
const BoxClass = (props) => {
const [viewChanged, setViewChanged] = React.useState(0);
useEffect(() => {
// start the Explorer
let contentExplorer = new Box.ContentExplorer();
// Show the content explorer
contentExplorer.show(props.rootFolderId, props.token, {
container: `.content-explorer___${props.entityId}`,
...(props?.isMobile && {
// [NOTE]: we need this hack because the prop documented by Box is not working
// hide some action if is mobile
canDownload: false, // hide link in drop-down menuy
onPreview: () => {
setTimeout(() => {
// wait for print icon
const controls = document.querySelector(
".bcpr-PreviewHeader-controls",
);
[...(controls?.children ?? [])].forEach(function (el) {
// get headers buttons
if (!el.classList.contains("bcpr-PreviewHeader-button-close"))
el.style.display = "none"; // remove all actions but the close button
});
}, 100);
},
}),
contentUploaderProps: {
isFolderUploadEnabled: true,
fileLimit: 500,
},
canShare: false,
logoUrl: "",
canDelete: props.canDelete === undefined ? true : props.canDelete,
canRename: props.canRename === undefined ? true : props.canRename,
canUpload: props.canUpload === undefined ? true : props.canUpload,
canCreateNewFolder:
props.canCreateNewFolder === undefined
? true
: props.canCreateNewFolder,
responseInterceptor: (response) => {
const { data } = response;
if (data.name && !data.parent?.etag && !data.parent?.sequence_id) {
data.name = props.entityName;
}
if (data.modified_by) {
data.modified_by = {};
}
if (data.parent) {
data.parent.name = props.entityName;
}
if (data?.item_collection?.entries) {
data.item_collection.entries = data.item_collection.entries.map(
(item) => {
if (item.modified_by) {
item.modified_by = {};
}
if (item.parent.name) {
item.parent.name = props.entityName;
}
if (item.path_collection?.entries[1]?.name) {
item.path_collection.entries[1].name = props.entityName;
}
return item;
},
);
}
if (data.entries) {
data.entries = data.entries.map((item) => {
if (item.modified_by) {
item.modified_by = {};
}
if (item.parent.name) {
item.parent.name = props.entityName;
}
if (item.path_collection?.entries[1]?.name) {
item.path_collection.entries[1].name = props.entityName;
}
return item;
});
}
if (data.path_collection?.entries[1]?.name) {
data.path_collection.entries[1].name = props.entityName;
}
setViewChanged((prev) => prev + 1);
return response;
},
});
if (props.onSearchActive) {
const searchElements = document.getElementsByClassName("be-search");
if (searchElements?.length) {
const inputChild = searchElements[0].firstChild;
if (inputChild)
inputChild.addEventListener("focus", props.onSearchActive);
}
}
}, [
props.rootFolderId,
props.token,
props.entityId,
props.isMobile,
props.canDelete,
props.canRename,
props.canUpload,
props.canCreateNewFolder,
props.entityName,
props.onSearchActive,
]);
useEffect(() => {
setTimeout(() => {
const breadCrumbs = document.getElementsByClassName(
"bdl-Breadcrumb-title",
);
if (breadCrumbs?.[0]) {
breadCrumbs[0].innerHTML = props.entityName;
}
}, 1);
}, [viewChanged]);
return (
);
};
export default (props) => {
const [boxScriptLoaded, setBoxScriptLoaded] = React.useState(false);
const { token, loading } = useHandleBoxToken(props?.token);
const { isMobile } = props || {};
React.useEffect(() => {
const boxScriptLoadedInterval = setInterval(() => {
if (
typeof Box != typeof undefined &&
"ContentExplorer" in (Box || {}) &&
"Preview" in (Box || {})
) {
setBoxScriptLoaded(true);
clearInterval(boxScriptLoadedInterval);
}
}, 500);
return () => {
clearInterval(boxScriptLoadedInterval);
};
}, []);
if ((!isMobile && ((!token && !props.token) || loading)) || !boxScriptLoaded)
return
Connecting to folder....
;return ;
};
```
Contributor guide
Assessment
This issue has not been assessed yet.