Parameter controls not working #232
Replies: 1 comment 1 reply
-
|
Hey @jacob-carlborg-apoex thanks for the all the info and sorry you are running into problems. This is not one I've come across I have to say. Can I ask you to open this as an issue rather than a discussion? And if you could provide details of what versions of rails/viewcomponent/lookbook etc you are running that would help me with trying to figure out what is going on here. If possible, if you could also copy and paste an example of the preview method code with the I assume your application is not open-source so that I could take a look at it myself? |
Beta Was this translation helpful? Give feedback.
-
|
I've created an issue from this now: #233
No, unfortunately is closed source. |
Beta Was this translation helpful? Give feedback.
-
I've integrated Lookbook to our application but some of the parameter controls are not working. The once I've tested which are not working are:
toggleandselect. Nothing happens when I click on a toggle or a select box. It seems to be some issue with the JavaScript, but there are no errors in the browser console. The tree that lists the components are working properly so the JavaScript is not completely broken. If I change the parameter type totexteverything works fine and the preview is automatically updated when I change the parameter value. I've tested this in Safari (16.1 (18614.2.9.1.12)) and Chrome (107.0.5304.87 (Official Build) (arm64)).I've also tested to generate a new Rails application with ViewComponent and Lookbook and then everything works as expected. So there's something weird with the setup/configuration in our application.
Any ideas how to debug this?
I've included the debug data from Lookbook below. Note,
config.components_pathis not correct. We have our components inapp/frontend/componentsandapp/frontend/pages.{ "version": "1.3.3", "env": "development", "config": { "project_name": "Lookbook", "log_level": 2, "log_use_rails_logger": true, "auto_refresh": true, "components_path": "app/components", "page_controller": "Lookbook::PageController", "page_route": "pages", "page_paths": [ "test/components/docs" ], "page_extensions": [ "html.*", "md.*" ], "page_options": { }, "markdown_options": { "tables": true, "fenced_code_blocks": true, "disable_indented_code_blocks": true, "strikethrough": true, "highlight": true, "with_toc_data": true, "lax_spacing": true }, "highlighter_options": { "theme": "github", "dark": false }, "sort_examples": false, "preview_paths": [ "/Users/jacobcarlborg/.rvm/gems/ruby-2.7.2@my-rails-app/gems/view_component-contrib-0.1.1/app/views", "/Users/jacobcarlborg/development/apoex/my-rails-app/app/frontend/components", "/Users/jacobcarlborg/development/apoex/my-rails-app/app/frontend/pages" ], "preview_display_options": { }, "preview_disable_action_view_annotations": true, "preview_params_options_eval": false, "listen": true, "listen_paths": [ "/Users/jacobcarlborg/.rvm/gems/ruby-2.7.2@my-rails-app/gems/view_component-contrib-0.1.1/app/views", "/Users/jacobcarlborg/development/apoex/my-rails-app/app/frontend/components", "/Users/jacobcarlborg/development/apoex/my-rails-app/app/frontend/pages", "app/components" ], "listen_extensions": [ "rb", "html.*" ], "listen_use_polling": false, "ui_theme": "zinc", "ui_theme_overrides": { }, "ui_favicon": true, "debug_menu": true, "experimental_features": false, "preview_controller": "ViewComponentsController", "panels": { "main": [ { "label": "Preview", "hotkey": "v", "disabled": false, "show": true, "copy": null, "locals": { }, "partial": "lookbook/inspector/panels/preview", "name": "preview", "group": "main" }, { "label": "HTML", "hotkey": "h", "disabled": false, "show": true, "copy": null, "locals": { }, "partial": "lookbook/inspector/panels/output", "name": "output", "group": "main" } ], "drawer": [ { "label": "Source", "hotkey": "s", "disabled": false, "show": true, "copy": "#<Proc:0x0000000126d74200 (eval):1 (lambda)>", "locals": { }, "partial": "lookbook/inspector/panels/source", "name": "source", "group": "drawer" }, { "label": "Notes", "hotkey": "n", "disabled": "#<Proc:0x0000000126d6e030 (eval):1 (lambda)>", "show": true, "copy": null, "locals": { }, "partial": "lookbook/inspector/panels/notes", "name": "notes", "group": "drawer" }, { "label": "Params", "hotkey": "p", "disabled": "#<Proc:0x0000000126d674d8 (eval):1 (lambda)>", "show": true, "copy": null, "locals": { }, "partial": "lookbook/inspector/panels/params", "name": "params", "group": "drawer" } ] }, "inputs": { "select": { "name": "select", "partial": "lookbook/inspector/inputs/select", "options": { "opts": { } } }, "textarea": { "name": "textarea", "partial": "lookbook/inspector/inputs/textarea", "options": { "opts": { } } }, "toggle": { "name": "toggle", "partial": "lookbook/inspector/inputs/toggle", "options": { "opts": { } } }, "color": { "name": "color", "partial": "lookbook/inspector/inputs/color", "options": { "opts": { } } }, "range": { "name": "range", "partial": "lookbook/inspector/inputs/range", "options": { "opts": { } } }, "text": { "name": "text", "partial": "lookbook/inspector/inputs/text", "options": { "opts": { } } }, "email": { "name": "email", "partial": "lookbook/inspector/inputs/text", "options": { "opts": { } } }, "number": { "name": "number", "partial": "lookbook/inspector/inputs/text", "options": { "opts": { } } }, "tel": { "name": "tel", "partial": "lookbook/inspector/inputs/text", "options": { "opts": { } } }, "url": { "name": "url", "partial": "lookbook/inspector/inputs/text", "options": { "opts": { } } }, "date": { "name": "date", "partial": "lookbook/inspector/inputs/text", "options": { "opts": { } } }, "datetime_local": { "name": "datetime_local", "partial": "lookbook/inspector/inputs/text", "options": { "opts": { } } } }, "tags": { "hidden": { "name": "hidden", "label": "Hidden", "options": { "label": "Hidden status", "opts": { } } }, "label": { "name": "label", "label": "Label", "options": { "label": "Label", "opts": { } } }, "display": { "name": "display", "label": "Display", "options": { "label": "Display", "opts": { } } }, "position": { "name": "position", "label": "Position", "options": { "label": "Position", "opts": { } } }, "id": { "name": "id", "label": "Id", "options": { "label": "Id", "opts": { } } }, "component": { "name": "component", "label": "Component", "options": { "label": "Component", "opts": { } } }, "param": { "name": "param", "label": "Param", "options": { "label": "Param", "opts": { } } }, "logical_path": { "name": "logical_path", "label": "Logical Path", "options": { "label": "Logical Path", "opts": { } } } } } }Beta Was this translation helpful? Give feedback.
All reactions