diff --git a/apps/docs/components/Playground.js b/apps/docs/components/Playground.js
index 1a67c924..c85920d4 100644
--- a/apps/docs/components/Playground.js
+++ b/apps/docs/components/Playground.js
@@ -82,7 +82,6 @@ export default function Playground() {
},
]);
const [url, setUrl] = useState(null);
- let [loading] = useState(true);
const [color] = useState('var(--ifm-color-primary)');
const [selectedPreviewFile, setSelectedPreviewFile] = useState(null);
// const [resetPreviewFiles, setResetPreviewFiles] = useState(false);
@@ -420,10 +419,7 @@ export default function Playground() {
>
{isSidebarOpen && (!url || error) && (
-
+
)}
{isSidebarOpen && url && !error && (
@@ -499,13 +495,13 @@ export default function Playground() {
>
{file.isEditing ? (
renameFile(e.target.value)}
onBlur={() => disableEditMode(index)}
+ onChange={(e) => renameFile(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') disableEditMode(index);
}}
+ type="text"
+ value={editingValue}
{...stylex.props([
styles.tabInput,
activeFileIndex === index && styles.editingInput,
@@ -513,9 +509,9 @@ export default function Playground() {
/>
) : (
enableEditMode(index)}
+ readOnly={true}
+ value={file.name}
{...stylex.props(styles.tabInput)}
/>
)}
@@ -688,6 +684,7 @@ const styles = stylex.create({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
+ borderStyle: 'none',
marginLeft: '10px',
backgroundColor: 'transparent',
cursor: 'pointer',
@@ -728,7 +725,7 @@ const styles = stylex.create({
directoryText: {
marginLeft: '8px',
textAlign: 'left',
- flex: 1,
+ flex: '1',
},
tabList: {
display: 'flex',
@@ -764,6 +761,7 @@ const styles = stylex.create({
tabInput: {
flex: '1',
backgroundColor: 'transparent',
+ borderStyle: 'none',
color: 'inherit',
fontSize: '14px',
padding: '2px 4px',
@@ -784,6 +782,7 @@ const styles = stylex.create({
alignItems: 'center',
justifyContent: 'center',
marginLeft: '10px',
+ borderStyle: 'none',
backgroundColor: 'transparent',
cursor: 'pointer',
padding: '4px',
@@ -813,6 +812,7 @@ const styles = stylex.create({
width: '100%',
height: '100%',
backgroundColor: '#ffffff',
+ borderStyle: 'none',
},
loading: {
display: 'flex',