Components Not Editable over Chrome Webbrowser

[vatsalsmehta]

Hey team,

I am not able to edit the components whether it be the form or the parameters inside them or the menu bar. The icon to edit them doesn't work neither locally(through code) or on the online editor. Can someone guide me if it's fix is available in any of the previous versions.

Thanks & Regards

[lexoyo]

Hello I'm sorry to hear that 2 people recently reported problems with the side panel on chrome but not firefox Would you try with another browser please?

[vatsalsmehta]

Hey yes not only the prebuilt components but even the custom component that I made has its props accessible over Firefox and Safari too(even though its not supported) but not accesible over chrome, does any previous commit of silex works over chrome ? or any idea for its fix ?

[lexoyo]

It is certainly recent, I'll definitely investigate

If you have a chance to test previous versions it would definitely help to know which one broke the compatibility

I work with firefox and i don't have a release manager or users to help me test, maybe I should create a process for new releases

[vatsalsmehta]

Sure will definitely test out previous versions and update this thread

[lexoyo]

Hello I tried to reproduce this but i could not Would you please provide some context?

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'

If you use Silex online, please complete the following information

• URL: [e.g. editor.silex.me]
• Browser [e.g. chrome, safari]
• The website you are working on [e.g. https://yourwevsite.com]

If you use Silex desktop app, please complete the following information

• Silex desktop version: [e.g. v2.7.23]
• OS: [e.g. Windows 10]
• Browser [e.g. chrome, safari]
  • The website you are working on [e.g. https://yourwevsite.com]

Additional context Add any other context about the problem here.

[vatsalsmehta]

Hey Alex

url: https://editor.silex.me/ Browser: Chrome, (Same issue when running code on localhost web version) Issue: Not able to edit the props of a component through the settings icon. I am not able to click and edit the values of anything be it hamburger menu bar's height or color palette of a button since I can't access them itself Also in the toolbar only 3 icons are available instead of 4

Tool bar over chrome

Toolbar over Safari/firefox

For your refrence when one opens console on launching webapp over chrome we get the following error:

Uncaught TypeError: Cannot read properties of null (reading 'querySelector') at Ps (tabbed.ts:89:20) at Ns (tabbed.ts:50:17) at tabbed.ts:17:17 at Array.forEach () at Os (tabbed.ts:17:4) at PropertyTool.ts:77:3 at PropertyTool.ts:40:19 Attaching the error screenshot as well the missing icon screenshot with this

All of the errors are interlinked I feel on seeing the code and can be reproduced by simply using chrome to access website.

[lexoyo]

Hello

That is very helpful, thank you !

[lexoyo]

@vatsalsmehta I added debug info, would you please try again on chrome and show me the JS error

I still can not reproduce so I'll need your help

Here is the published test: https://staging.silex.me/

[ceubri]

Same bug for me : react-dom.development.js:26244 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools SiteFrame.ts:62 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write Ko @ SiteFrame.ts:62 Fo @ SiteFrame.ts:17 Vo @ SiteFrame.ts:39 qu @ Workspace.ts:46 Yu @ App.ts:63 (anonymous) @ (index):68 tags-input.js:1 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 i @ tags-input.js:1 Ru @ StylePane.ts:38 (anonymous) @ PropertyTool.ts:55 (anonymous) @ PropertyTool.ts:40 PropertyTool.ts:77 WIP #1194 {element: div.silex-property-tool.notranslate, tabContainer: null} tabbed.ts:15 Incorrect input {container: null, type: 'properties'} Os @ tabbed.ts:15 (anonymous) @ PropertyTool.ts:79 (anonymous) @ PropertyTool.ts:40 setTimeout (async) qu @ PropertyTool.ts:39 Yu @ App.ts:63 (anonymous) @ (index):68 tabbed.ts:16 Uncaught Error: Incorrect input, missing container at Os (tabbed.ts:16:11) at PropertyTool.ts:79:3 at PropertyTool.ts:40:19 Os @ tabbed.ts:16 (anonymous) @ PropertyTool.ts:79 (anonymous) @ PropertyTool.ts:40 setTimeout (async) qu @ PropertyTool.ts:39 Yu @ App.ts:63 (anonymous) @ (index):68 SiteFrame.ts:82 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write setHtml @ SiteFrame.ts:82 Go @ SiteFrame.ts:21 (anonymous) @ file.ts:472 (anonymous) @ CloudStorage.ts:147 SiteFrame.ts:93 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write setHtml @ SiteFrame.ts:93 Go @ SiteFrame.ts:21 (anonymous) @ file.ts:472 (anonymous) @ CloudStorage.ts:147 main.js:2 [Violation] 'load' handler took 159ms SiteFrame.ts:93 GET https://staging.silex.me/assets/realisations/videos/vignette.jpg 404 setHtml @ SiteFrame.ts:93 Go @ SiteFrame.ts:21 (anonymous) @ file.ts:472 (anonymous) @ CloudStorage.ts:147 load (async) loadWebsite @ CloudStorage.ts:138 ks @ file.ts:470 Ts @ file.ts:444 As @ file.ts:438 gs @ file.ts:131 openFileInfo @ file.ts:178 de.singleSiteMode.modalDialog.onClose @ Dashboard.ts:218 close @ ModalDialog.ts:158 Ur.element.querySelector.onclick @ Dashboard.ts:112 staging.silex.me/:1 GET https://staging.silex.me/assets/realisations/videos/vignette.jpg 404 staging.silex.me/:1 GET https://staging.silex.me/ce/github/get/France-resine-preview/preview/assets/realisations/videos/france-resine-escalier.mp4 400 PropertyTool.ts:78 WIP #1194 <div class=​"simplebar-content" style=​"padding:​ 0px;​">​…​

[ceubri]

Et un autre + "clean" :

SiteFrame.ts:82 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write setHtml @ SiteFrame.ts:82 Go @ SiteFrame.ts:21 (anonymous) @ file.ts:472 (anonymous) @ CloudStorage.ts:146 SiteFrame.ts:93 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write setHtml @ SiteFrame.ts:93 Go @ SiteFrame.ts:21 (anonymous) @ file.ts:472 (anonymous) @ CloudStorage.ts:146 StageWrapper.ts:133 onAddElement NO STAGE ha @ StageWrapper.ts:133 (anonymous) @ StageWrapper.ts:124 (anonymous) @ crud-store.ts:67 (anonymous) @ index.ts:81 h @ redux.js:221 Dn @ index.ts:14 Rr @ dispatchers.ts:21 (anonymous) @ file.ts:489 contentChanged @ SiteFrame.ts:118 setHtml @ SiteFrame.ts:95 Go @ SiteFrame.ts:21 (anonymous) @ file.ts:472 (anonymous) @ CloudStorage.ts:146 load (async) loadWebsite @ CloudStorage.ts:137 As @ file.ts:470 xs @ file.ts:409 openTemplate @ file.ts:190 de.singleSiteMode.modalDialog.onClose @ Dashboard.ts:219 close @ ModalDialog.ts:158 element.querySelector.onclick @ Dashboard.ts:111 StageWrapper.ts:158 onDeleteElement NO STAGE

[lexoyo]

super thx @ceubri

[lexoyo]

@ceubri @vatsalsmehta could you please confirm that the problem is fixed on chrome? https://staging.silex.me/

[ceubri]

OH YES !!!

[vatsalsmehta]

https://staging.silex.me/

Hey Alex its solved on chrome, can you tell me the commit which solved the issue, would be really curious to know it. Thanks a lot.