u

src/components/article/boxes/ArticleViewBrand.jsx

@@ -147,7 +147,14 @@ export default class ArticleViewBrand extends Component {
         isDirty={brandDraftDirty}
         canSave={brandDraftValid}
         display={<PanelValue>{value.name || null}</PanelValue>}
-        edit={<BrandEdit brands={brands} />}
+        edit={({ draft, onChange, inputRef }) => (
+          <BrandEdit
+            brands={brands}
+            draft={draft}
+            onChange={onChange}
+            inputRef={inputRef}
+          />
+        )}
       />
     );
   }

src/components/article/boxes/ArticleViewEANs.jsx

@@ -112,7 +112,9 @@ export default class ArticleViewEANs extends Component {
         isDirty={eansDraftDirty}
         canSave={eansDraftValid}
         display={<EansDisplay sku={articleData.sku} eans={value.eans} />}
-        edit={<EansEdit />}
+        edit={({ draft, onChange, inputRef }) => (
+          <EansEdit draft={draft} onChange={onChange} inputRef={inputRef} />
+        )}
       />
     );
   }

src/components/article/boxes/ArticleViewName.jsx

@@ -179,24 +179,20 @@ class NameDisplay extends Component {
 
 class NameEdit extends Component {
   render() {
-    const { draft, onChange, inputRef, name, categoryIds } = this.props;
+    const { name, categoryIds } = this.props;
-    const currentName = draft?.name ?? name;
-    const currentCategoryIds = draft?.categoryIds ?? categoryIds;
     return (
       <Box sx={columnSx}>
         <Box sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
           <SingleLineTextEdit
-            inputRef={inputRef}
             label="Name"
-            value={currentName}
+            value={name}
-            onChange={(nextName) => onChange({ ...draft, name: nextName })}
+            onChange={() => {}}
             sx={articleNameFieldSx}
           />
         </Box>
         <CategoryPills
-          categoryIds={currentCategoryIds}
+          categoryIds={categoryIds}
           editMode
-          onCategoryIdsChange={(nextIds) => onChange({ ...draft, categoryIds: nextIds })}
         />
       </Box>
     );
@@ -217,6 +213,7 @@ export default class ArticleViewName extends Component {
     let article = null;
 
     if (nameChanged) {
+			console.log('nameChanged', name, articleData.name);
       const nameRes = await store.article.update(articleData.sku, { name });
       article = nameRes.article;
     }
@@ -248,12 +245,16 @@ export default class ArticleViewName extends Component {
           <NameDisplay
             name={value.name}
             categoryIds={value.categoryIds}
+
           />
         }
         edit={
           <NameEdit
             name={value.name}
             categoryIds={value.categoryIds}
+						onNameChange={() => {}}
+						onCategoryIdsChange={() => {}}
+						onIsDirtyChange={() => {}}
           />
         }
       />

src/components/article/boxes/ArticleViewPrice.jsx

@@ -512,13 +512,16 @@ export default class ArticleViewPrice extends Component {
         onSave={this.handleSave}
         isDirty={priceDraftDirty}
         canSave={priceDraftValid}
-        overlay={
+        overlay={({ editing, draft, onChange }) => (
           <PriceOverlay
+            editing={editing}
+            draft={draft}
+            onChange={onChange}
             unitOptions={unitOptions}
             articleUnitSi={articleData.unit?.si}
             onOpenEditor={this.openUnitEditor}
           />
-        }
+        )}
         display={
           <PriceDisplay
             saved={priceValue}
@@ -527,8 +530,11 @@ export default class ArticleViewPrice extends Component {
             displaySymbol={displaySymbol}
           />
         }
-        edit={
+        edit={({ draft, onChange, inputRef }) => (
           <PriceEdit
+            draft={draft}
+            onChange={onChange}
+            inputRef={inputRef}
             taxRates={taxRates}
             unitOptions={unitOptions}
             displaySymbol={displaySymbol}
@@ -540,7 +546,7 @@ export default class ArticleViewPrice extends Component {
             onUnitUpserted={this.refreshUnits}
             onUnitDeleted={this.refreshUnits}
           />
-        }
+        )}
       />
     );
   }

src/components/panels/EditablePanelTile.jsx

@@ -1,4 +1,4 @@
-import { Component, cloneElement, createRef, isValidElement } from 'react';
+import { Component, createRef } from 'react';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
@@ -20,10 +20,10 @@ function valuesEqual(a, b) {
  * Panel tile with centralized inline-edit chrome.
  * Pass `onSave` to enable edit UI; omit it for read-only tiles (no edit icon).
  *
- * Content is element props (not render callbacks):
+ * Content:
  *   display — React node shown when not editing
- *   edit    — element cloned with { draft, onChange, inputRef } while editing
+ *   edit    — React node, or ( { draft, onChange, inputRef } ) => node, while editing
- *   overlay — optional element cloned with { editing, draft, onChange }
+ *   overlay — optional ( { editing, draft, onChange } ) => node
  */
 class EditablePanelTileBase extends Component {
   constructor(props) {
@@ -199,12 +199,15 @@ class EditablePanelTileBase extends Component {
     const { display, edit } = this.props;
     const { editing, draft } = this.state;
 
-    if (editing && draft != null && isValidElement(edit)) {
+    if (editing && draft != null) {
-      return cloneElement(edit, {
+      if (typeof edit === 'function') {
-        draft,
+        return edit({
-        onChange: this.handleDraftChange,
+          draft,
-        inputRef: this.inputRef,
+          onChange: this.handleDraftChange,
-      });
+          inputRef: this.inputRef,
+        });
+      }
+      return edit;
     }
     return display;
   }
@@ -212,8 +215,8 @@ class EditablePanelTileBase extends Component {
   renderOverlayNode() {
     const { overlay } = this.props;
     const { editing, draft } = this.state;
-    if (!isValidElement(overlay)) return null;
+    if (typeof overlay !== 'function') return null;
-    return cloneElement(overlay, {
+    return overlay({
       editing,
       draft,
       onChange: this.handleDraftChange,