diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less
index 49b29f2fa4..7ad309a6f6 100644
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/apps/common/mobile/resources/less/common-ios.less
@@ -712,6 +712,11 @@
         }
     }
 
+
+    .sheet-modal.edit-custom-font-size {
+        height: 70vh;
+    }
+
     .list .item-link.size-label {
         padding: 5px 10px;
         border-radius: 8px !important;
@@ -723,33 +728,6 @@
         align-items: center;
     }
 
-    .segmented.font-size-stepper {
-        .button {
-            border: none !important;
-            font-size: 24px;
-            color: @text-normal;
-            background-color: @background-tertiary;
-        }
-
-        .decrement.button { 
-            border-radius: 8px 0 0 8px; 
-        }
-
-        .increment.button { 
-            border-radius: 0 8px 8px 0; 
-        }
-
-        .button + .button::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: 6px;
-            bottom: 6px;
-            width: 2px;
-            background-color: @background-menu-divider;
-        }
-    }
-
     .page-custom-font-size .item-content.item-input {
         .item-inner {
             flex-direction: row;
diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less
index 692fcb0e4e..2e23c1cd60 100644
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@@ -781,6 +781,10 @@
         }
     }
 
+    .sheet-modal.edit-custom-font-size {
+        height: 70vh;
+    }
+
     .list .item-link.size-label {
         padding: 5px;
         border-radius: 4px !important;
diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less
index 92df25b106..b8b7c3defb 100644
--- a/apps/documenteditor/mobile/src/less/icons-ios.less
+++ b/apps/documenteditor/mobile/src/less/icons-ios.less
@@ -11,7 +11,6 @@
   }
 
   .theme-type-dark {
-    .segmented.font-size-stepper .button,
     .list .item-link.size-label {
         color: @brand-word;
         background-color: @background-menu-divider;
diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
index 4854b4841c..e11a8a4845 100644
--- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
@@ -10,6 +10,7 @@ import { PageChartDesign,  PageChartDesignType, PageChartDesignStyle, PageChartD
 import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
 import EditingPage from './EditingPage';
 import { MainContext } from '../../page/main';
+import { customFont } from './EditText';
 
 const routes = [
     {
@@ -257,12 +258,14 @@ const EditView = () => {
 
     return (
         !Device.phone ?
-            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
+            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')} onPopoverClose={() => {
+                if (customFont.current) customFont.current(); }}>
                 <View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
                     <EditingPage />
                 </View>
             </Popover> :
-            <Sheet id="edit-sheet" closeByOutsideClick={false} onSheetClosed={() =>  mainContext.closeOptions('edit')}>
+            <Sheet id="edit-sheet" closeByOutsideClick={false} onSheetClosed={() =>  mainContext.closeOptions('edit')} onSheetClose={() => {
+                if (customFont.current) customFont.current(); }}>
                 <View routes={routes} url='/editing-page/'>
                     <EditingPage />
                 </View>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index 8ce8f8456d..6059e9fbcc 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -1,4 +1,4 @@
-import React, {Fragment, useEffect, useState, useRef, useMemo} from 'react';
+import React, {Fragment, useEffect, useState, useRef, useMemo, useCallback} from 'react';
 import {observer, inject} from "mobx-react";
 import { f7, View, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListInput, Range } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
@@ -125,7 +125,7 @@ const PageFonts = props => {
                         </Link>
                     </div>}
                     <div slot='after'>
-                        <Segmented className="font-size-stepper">
+                        <Segmented>
                             <Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
                                 {isAndroid ? 
                                     <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
@@ -209,31 +209,36 @@ const PageCustomFontSize = (props) => {
     const valueRef = useRef(value);
     useEffect(() => { valueRef.current = value; }, [value]);
 
-    const apply = (size) => {
+    const apply = useCallback(() => {
+        const size = valueRef.current;
         if (size === '') return;
         if (String(size) === String(displaySize)) return;
         props.applyFontSize(size);
-    };
+    }, [displaySize, props.applyFontSize]);
 
     const toggleCustomClass = (on) => {
-        const modalId = Device.phone ? '#edit-sheet' : '#edit-popover';
-        const modalEl = document.querySelector(modalId);
-        if (!modalEl) return;
-        modalEl.classList.toggle('edit-custom-font-size', on);
+        const el = document.querySelector(Device.phone ? '#edit-sheet' : '#edit-popover');
+        if (el) el.classList.toggle('edit-custom-font-size', on);
     };
 
     const focusInput = () => {
         const el = document.querySelector('.page-custom-font-size input');
-        if (!el) return;
-        el.focus();
+        if (el) el.focus();
     };
 
+    useEffect(() => {
+        customFont.current = apply;
+        return () => {
+            if (customFont.current === apply)  customFont.current = null;
+        };
+    }, [apply]);
+
     return (
-        <Page className="page-custom-font-size"  onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply(valueRef.current);}}>
+        <Page className="page-custom-font-size" onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply();}}>
             <Navbar title={t('Edit.txtCustom')} backLink="Back">
                 {Device.phone && 
                     <NavRight>
-                        <Link sheetClose="#edit-sheet">
+                        <Link sheetClose="#edit-sheet" onClick={apply}>
                             {Device.ios ? 
                                 <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
                                 <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
@@ -243,10 +248,7 @@ const PageCustomFontSize = (props) => {
                 }
             </Navbar>
             <List className="input-list">
-                <ListInput label={t('Edit.textSize')} type="number" inputmode="numeric" min={1} max={300}value={value}
-                    onChange={(e) => setValue(e.target.value)}
-                    onBlur={(e) => apply(e.target.value)}
-                />
+                <ListInput label={t('Edit.textSize')} type="number" inputmode="numeric" min={1} max={300} value={value} onChange={(e) => setValue(e.target.value)} />
             </List>
         </Page>
     );
@@ -974,6 +976,7 @@ const EditText = props => {
         )
 };
 
+const customFont = { current: null };
 const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
 const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
 const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
@@ -1000,5 +1003,6 @@ export {
     PageOrientationTextShape,
     PageOrientationTextTable,
     // PageTextCustomBackColor,
-    PageTextDirection
+    PageTextDirection,
+    customFont
 };
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/less/icons-ios.less b/apps/presentationeditor/mobile/src/less/icons-ios.less
index 65aff0dc1a..ab169b43d9 100644
--- a/apps/presentationeditor/mobile/src/less/icons-ios.less
+++ b/apps/presentationeditor/mobile/src/less/icons-ios.less
@@ -8,7 +8,6 @@
   }
 
   .theme-type-dark {
-    .segmented.font-size-stepper .button,
     .list .item-link.size-label {
         color: @brand-slide;
         background-color: @background-menu-divider;
diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
index 20d43ff890..02b7dde271 100644
--- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
@@ -10,6 +10,7 @@ import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTa
 import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
 import EditingPage from './EditingPage';
 import { MainContext } from '../../page/main';
+import { customFont } from './EditText';
 
 const routes = [
     {
@@ -259,12 +260,14 @@ const EditView = () => {
 
     return (
         !Device.phone ?
-            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
+            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')} onPopoverClose={() => {
+                if (customFont.current) customFont.current(); }}>
                 <View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
                     <EditingPage />
                 </View>
             </Popover> :
-            <Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}>
+            <Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')} onSheetClose={() => {
+                if (customFont.current) customFont.current(); }}>
                 <View routes={routes} url='/editing-page/'>
                     <EditingPage />
                 </View>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
index f1fc152ca3..c5275707cf 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
@@ -1,4 +1,4 @@
-import React, {Fragment, useState, useEffect, useRef, useMemo} from 'react';
+import React, {Fragment, useState, useEffect, useRef, useMemo, useCallback} from 'react';
 import {observer, inject} from "mobx-react";
 import {f7, View, List, ListItem, ListButton, ListInput, Icon,  Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Range} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
@@ -499,7 +499,7 @@ const PageFonts = props => {
                         </Link>
                     </div>}
                     <div slot='after'>
-                        <Segmented className="font-size-stepper">
+                        <Segmented>
                             <Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
                                 {isAndroid ? 
                                     <SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
@@ -584,31 +584,36 @@ const PageCustomFontSize = (props) => {
     const valueRef = useRef(value);
     useEffect(() => { valueRef.current = value; }, [value]);
 
-    const apply = (size) => {
+    const apply = useCallback(() => {
+        const size = valueRef.current;
         if (size === '') return;
         if (String(size) === String(displaySize)) return;
         props.applyFontSize(size);
-    };
+    }, [displaySize, props.applyFontSize]);
 
     const toggleCustomClass = (on) => {
-        const modalId = Device.phone ? '#edit-sheet' : '#edit-popover';
-        const modalEl = document.querySelector(modalId);
-        if (!modalEl) return;
-        modalEl.classList.toggle('edit-custom-font-size', on);
+        const el = document.querySelector(Device.phone ? '#edit-sheet' : '#edit-popover');
+        if (el) el.classList.toggle('edit-custom-font-size', on);
     };
 
     const focusInput = () => {
         const el = document.querySelector('.page-custom-font-size input');
-        if (!el) return;
-        el.focus();
+        if (el) el.focus();
     };
 
+    useEffect(() => {
+        customFont.current = apply;
+        return () => {
+            if (customFont.current === apply)  customFont.current = null;
+        };
+    }, [apply]);
+
     return (
-        <Page className="page-custom-font-size"  onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply(valueRef.current);}}>
+        <Page className="page-custom-font-size"  onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply();}}>
             <Navbar title={_t.txtCustom} backLink="Back">
                 {Device.phone && 
                     <NavRight>
-                        <Link sheetClose="#edit-sheet">
+                        <Link sheetClose="#edit-sheet" onClick={apply}>
                             {Device.ios ? 
                                 <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
                                 <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
@@ -618,9 +623,8 @@ const PageCustomFontSize = (props) => {
                 }
             </Navbar>
             <List className="input-list">
-                <ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300}value={value}
+                <ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300} value={value}
                     onChange={(e) => setValue(e.target.value)}
-                    onBlur={(e) => apply(e.target.value)}
                 />
             </List>
         </Page>
@@ -1130,6 +1134,7 @@ const PageTextDirection = inject("storeTextSettings", "storeFocusObjects")(obser
 const PageTextLineSpacing = inject("storeTextSettings", "storeFocusObjects")(observer(PageLineSpacing));
 const PageTextBulletsLinkSettings = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletLinkSettings));
 const PageTextCustomFontSize = inject('storeTextSettings')(observer(PageCustomFontSize));
+const customFont = { current: null };
 
 export {
     EditTextContainer as EditText,
@@ -1144,5 +1149,6 @@ export {
     PageTextLineSpacing,
     PageTextBulletsLinkSettings,
     PageOrientationTextShape,
-    PageOrientationTextTable
+    PageOrientationTextTable,
+    customFont
 };
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
index 5479cfee26..d39d65d057 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
@@ -14,7 +14,6 @@
     }
 
     .theme-type-dark {
-        .segmented.font-size-stepper .button,
         .list .item-link.size-label {
             color: @brand-cell;
             background-color: @background-menu-divider;
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
index e333f1f5b1..803931ac62 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
@@ -11,6 +11,7 @@ import { PageChartDesign,  PageChartDesignType, PageChartDesignStyle, PageChartD
 import { PageEditTypeLink, PageEditSheet } from './EditLink';
 import EditingPage from './EditingPage';
 import { MainContext } from '../../page/main';
+import { customFont } from './EditText';
 
 const routes = [
     {
@@ -339,12 +340,14 @@ const EditView = () => {
 
     return (
         !Device.phone ?
-            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
+            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')} onPopoverClose={() => {
+                if (customFont.current) customFont.current(); }}>
                 <View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
                     <EditingPage />
                 </View>
             </Popover> :
-            <Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}>
+            <Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}  onSheetClose={() => {
+                if (customFont.current) customFont.current(); }}>
                 <View routes={routes} url='/editing-page/'>
                     <EditingPage />
                 </View>
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
index 8453e58bca..02b35109ab 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
@@ -1,4 +1,4 @@
-import React, {Fragment, useState, useEffect, useMemo, useRef} from 'react';
+import React, {Fragment, useState, useEffect, useMemo, useRef, useCallback} from 'react';
 import {observer, inject} from "mobx-react";
 import {f7, List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, ListInput, Block, Range} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
@@ -340,7 +340,7 @@ const PageFontsCell = props => {
                         </Link>
                     </div>}
                     <div slot='after'>
-                        <Segmented className="font-size-stepper">
+                        <Segmented>
                             <Button outline className='decrement item-link' onClick={() => {props.onFontSize(size, true)}}>
                                 {isAndroid ? 
                                     <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
@@ -425,31 +425,36 @@ const PageCustomFontSize = (props) => {
     const valueRef = useRef(value);
     useEffect(() => { valueRef.current = value; }, [value]);
 
-    const apply = (size) => {
+    const apply = useCallback(() => {
+        const size = valueRef.current;
         if (size === '') return;
         if (String(size) === String(displaySize)) return;
         props.applyFontSize(size);
-    };
+    }, [displaySize, props.applyFontSize]);
 
     const toggleCustomClass = (on) => {
-        const modalId = Device.phone ? '#edit-sheet' : '#edit-popover';
-        const modalEl = document.querySelector(modalId);
-        if (!modalEl) return;
-        modalEl.classList.toggle('edit-custom-font-size', on);
+        const el = document.querySelector(Device.phone ? '#edit-sheet' : '#edit-popover');
+        if (el) el.classList.toggle('edit-custom-font-size', on);
     };
    
     const focusInput = () => {
         const el = document.querySelector('.page-custom-font-size input');
-        if (!el) return;
-        el.focus();
+        if (el) el.focus();
     };
-   
-        return (
-            <Page className="page-custom-font-size"  onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply(valueRef.current);}}>
+
+    useEffect(() => {
+        customFont.current = apply;
+        return () => {
+            if (customFont.current === apply)  customFont.current = null;
+        };
+    }, [apply]);
+
+    return (
+        <Page className="page-custom-font-size"  onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply();}}>
             <Navbar title={_t.txtCustom} backLink="Back">
                 {Device.phone && 
                     <NavRight>
-                        <Link sheetClose="#edit-sheet">
+                        <Link sheetClose="#edit-sheet" onClick={apply}>
                             {Device.ios ? 
                                 <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
                                 <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
@@ -459,9 +464,8 @@ const PageCustomFontSize = (props) => {
                 }
             </Navbar>
             <List className="input-list">
-                <ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300}value={value}
+                <ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300} value={value}
                     onChange={(e) => setValue(e.target.value)}
-                    onBlur={(e) => apply(e.target.value)}
                 />
             </List>
         </Page>
@@ -1456,7 +1460,7 @@ const PageCellDirection = props => {
     )
 }
 
-
+const customFont = { current: null };
 const PageEditCell = inject("storeCellSettings", "storeWorksheets")(observer(EditCell));
 const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell));
 const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell));
@@ -1496,5 +1500,6 @@ export {
     CellStyle,
     CustomFormats,
     PageCreationCustomFormat,
-    PageCellTextDirection
+    PageCellTextDirection,
+    customFont
 };
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
index f498214add..bbdb7aa5bd 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
@@ -1,4 +1,4 @@
-import React, {Fragment, useState, useRef, useMemo, useEffect} from 'react';
+import React, {Fragment, useState, useRef, useMemo, useEffect, useCallback} from 'react';
 import {observer, inject} from "mobx-react";
 import {List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListInput, Range} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
@@ -296,7 +296,7 @@ const PageFonts = props => {
                         </Link>
                     </div>}
                     <div slot='after'>
-                        <Segmented className="font-size-stepper">
+                        <Segmented>
                             <Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
                                 {isAndroid ? 
                                     <SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
@@ -381,31 +381,36 @@ const PageCustomFontSize = (props) => {
     const valueRef = useRef(value);
     useEffect(() => { valueRef.current = value; }, [value]);
 
-    const apply = (size) => {
+    const apply = useCallback(() => {
+        const size = valueRef.current;
         if (size === '') return;
         if (String(size) === String(displaySize)) return;
         props.applyFontSize(size);
-    };
+    }, [displaySize, props.applyFontSize]);
 
     const toggleCustomClass = (on) => {
-        const modalId = Device.phone ? '#edit-sheet' : '#edit-popover';
-        const modalEl = document.querySelector(modalId);
-        if (!modalEl) return;
-        modalEl.classList.toggle('edit-custom-font-size', on);
+        const el = document.querySelector(Device.phone ? '#edit-sheet' : '#edit-popover');
+        if (el) el.classList.toggle('edit-custom-font-size', on);
     };
 
     const focusInput = () => {
         const el = document.querySelector('.page-custom-font-size input');
-        if (!el) return;
-        el.focus();
+        if (el) el.focus();
     };
-   
-       return (
-           <Page className="page-custom-font-size"  onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply(valueRef.current);}}>
+
+    useEffect(() => {
+        customFont.current = apply;
+        return () => {
+            if (customFont.current === apply)  customFont.current = null;
+        };
+    }, [apply]);
+
+    return (
+        <Page className="page-custom-font-size"  onPageBeforeIn={() => toggleCustomClass(true)} onPageAfterIn={focusInput} onPageBeforeOut={() => { toggleCustomClass(false); apply();}}>
             <Navbar title={_t.txtCustom} backLink="Back">
                 {Device.phone && 
                     <NavRight>
-                        <Link sheetClose="#edit-sheet">
+                        <Link sheetClose="#edit-sheet" onClick={apply}>
                             {Device.ios ? 
                                 <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
                                 <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg white'} />
@@ -415,9 +420,8 @@ const PageCustomFontSize = (props) => {
                 }
             </Navbar>
             <List className="input-list">
-                <ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300}value={value}
+                <ListInput label={_t.textSize} type="number" inputmode="numeric" min={1} max={300} value={value}
                     onChange={(e) => setValue(e.target.value)}
-                    onBlur={(e) => apply(e.target.value)}
                 />
             </List>
         </Page>
@@ -636,6 +640,7 @@ const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(obse
 const PageTextAdditionalFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
 const PageTextDirection = inject("storeTextSettings")(observer(PageDirection));
 const PageTextCustomFontSize = inject('storeTextSettings')(observer(PageCustomFontSize))
+const customFont = { current: null };
 
 export {
     EditTextContainer as EditText,
@@ -645,5 +650,6 @@ export {
     PageTextCustomFontColor,
     PageOrientationTextShape,
     PageTextAdditionalFormatting,
-    PageTextDirection
+    PageTextDirection,
+    customFont
 };
\ No newline at end of file