Whitespace Sidebar Search Not Working

The Sidebar search of the Whitespace theme isn’t working on 5.3.6.

I have verified that this is the case using a fresh template.

I am a new TiddlyWiki user, and I am leaving this here for anyone who comes after me.

For some reason, I had an impression like the search did work for a while.

Well whatever.

I can confirm this. I know nothing about the theme, and haven’t investigated why. But I see no search results for text clearly in a tiddler.

In the whitespace theme readme, we are told: Compatibility checked with TW 5.1.17 & TW 5.1.22 only!
TW5 v. 5.1.23 introduced some changes to the search.

1 Like

I dug into the code. Whitespace is using its own custom search box in $:/themes/jd/Whitespace/template/sidebar rather than the default $:/core/ui/SideBarSegments/search

Now all I need to find the issue in $:/themes/jd/Whitespace/template/sidebar and fix it.

class="jd-search-wrapper" in $:/themes/jd/Whitespace/template/sidebar is the section responsible for the Whitespace search feature

It contains:

  • <$edit-text tiddler="$:/temp/search" type="search" tag="input" placeholder="Search / create" class="jd-searchbar"/> which stores the entered text into $:/temp/search (this works as intended)
  • The 3 action buttons
  • the search results section (class="jd-search-results") which it tries to pull from $:/tags/SearchResults (which apparently doesn’t exist)

Partial fix is to replace portions of the Whitespace code with the current default search:

<$reveal state="$:/temp/search" type="nomatch" text="">
<$vars userInput={{{ [[$:/temp/search]get[text]] }}} configTiddler={{{ [[$:/state/search/currentTab]!is[missing]get[text]] :else[{$:/config/SearchResults/Default}] }}}>
<$list filter="[<userInput>minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="jd-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
<$tiddler tiddler=<<configTiddler>>>
{{$:/core/ui/SearchResults}}
</$tiddler>
</$list>
</$vars>
</$reveal>

Solution!

Edit the following code into $:/themes/jd/Whitespace/template/sidebar

\define wsconfig(name) $:/config/Whitespace/$name$
\define config-title()
$:/config/PageControlButtons/Visibility/$(listItem)$
\end
\define config-title-sidebar()
$:/config/SideBar/Visibility/$(currentTiddler)$
\end
\define drop-actions()
<$action-listops $tiddler="$:/tags/SideBar" $subfilter="+[insertbefore:currentTiddler<actionTiddler>]"/>
<$fieldmangler tiddler=<<actionTiddler>>>
<$action-sendmessage $message="tm-add-tag" $param="$:/tags/SideBar"/>
</$fieldmangler>
\end
\define drop-actions-PageControls-buttons()
<$action-listops $tiddler="$:/tags/PageControls" $subfilter="+[insertbefore:listItem<actionTiddler>]"/>
\end
\define sidebar-title()
<$list filter="[all[shadows+tiddlers]!has[draft.of]is[current]has[caption]]">{{!!caption}}</$list>
<$list filter="[all[shadows+tiddlers]!has[draft.of]is[current]!has[caption]]">{{!!title}}</$list>
\end
\define control-panel-button(class)
<$button to="$:/AdvancedSearch" tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="""$(tv-config-toolbar-class)$ $class$""">
<$action-setfield $tiddler=<<wsconfig search>> text="no"/>
<$action-setfield $tiddler="$:/temp/advancedsearch" text={{$:/temp/search}}/>
<$action-setfield $tiddler="$:/temp/search" text=""/>
{{$:/core/images/advanced-search-button}}
</$button>
\end
\define NewTidActions()
<$action-setfield $tiddler=<<wsconfig search>> text="no"/>
<$action-createtiddler $basetitle={{$:/temp/search}} $savetitle="$:/temp/NewTidTitle"/>
<$action-sendmessage $message="tm-edit-tiddler" $param={{$:/temp/NewTidTitle}}/>
<$action-deletetiddler $tiddler="$:/temp/NewTidTitle"/>
<$action-setfield $tiddler="$:/temp/search" text=""/>
\end
\define ws-page-controls()
<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageControls]!has[draft.of]]" variable="listItem">
<$droppable actions=<<drop-actions-PageControls-buttons>>>
<div class="tc-droppable-placeholder">
&nbsp;
</div>
<$list filter="[<config-title>!text[hide]]" variable="checker">
<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]">
<$draggable tiddler=<<listItem>> tag="span"><$transclude tiddler=<<listItem>>/></$draggable>
</$set>
</$list>
</$droppable>
</$list>
\end

<div class="vertical-controls">
<<ws-page-controls>>
</div>

<$scrollable class='jd-sidebar'>
<div class="jd-header">
<$reveal state="$:/state/sidebar" type="nomatch" text="no">
<$button set="$:/state/sidebar" setTo="no" tooltip="Unfix sidebar" class="tc-btn-invisible">{{$:/core/images/menu-button}}</$button>
</$reveal>
<$reveal state="$:/state/sidebar" type="match" text="no">
<$button set="$:/state/sidebar" setTo="yes" tooltip="Fix sidebar" class="tc-btn-invisible">{{$:/core/images/menu-button}}</$button>
</$reveal>
<span class="header-buttons">
<<ws-page-controls>>
</span>
</div>
<$list filter="[[$:/config/Whitespace/show-sitetitle]!text[no]]" variable="checker">
<div class="jd-sitetitle-wrapper">
<$list filter="[[$:/SiteTitle]!text[]]" variable="checker">
<div class="jd-sitetitle"><$transclude tiddler="$:/SiteTitle"/></div>
</$list>
<$list filter="[[$:/SiteSubtitle]!text[]]" variable="checker">
<div class="jd-sitesubtitle"><$transclude tiddler="$:/SiteSubtitle"/></div>
</$list>
</div>
</$list>
<div class="jd-sidebar-column">
<div class="jd-search-wrapper">
<div class="jd-search-header">
<$keyboard class="jd-searchbar-wrapper" tag="div" key="ctrl+space" actions=<<NewTidActions>>>
<$edit-text tiddler="$:/temp/search" type="search" tag="input" placeholder="Search / create" class="jd-searchbar"/>
</$keyboard>
<div class="jd-searchbar-buttons">
<$list filter="[[$:/temp/search]!text[]]">
<$button tooltip="Create new tiddler with this title" class="tc-btn-invisible" actions=<<NewTidActions>>>
{{$:/core/images/new-button}}
</$button>
<$button tooltip="Clear searchbar" class="tc-btn-invisible">
<$action-setfield $tiddler=<<wsconfig search>> text="no"/>
<$action-setfield $tiddler="$:/temp/advancedsearch" text=""/>
<$action-setfield $tiddler="$:/temp/search" text=""/>
{{$:/core/images/close-button}}
</$button>
</$list>
<$list filter="[list[$:/StoryList]] +[field:title[$:/AdvancedSearch]]" emptyMessage=<<control-panel-button>>>
<<control-panel-button "tc-selected">>
</$list>
</div>
</div>

<!--Modified Here by https://talk.tiddlywiki.org/t/whitespace-sidebar-search-not-working/12314-->
<$reveal state="$:/temp/search" type="nomatch" text="">
<$vars userInput={{{ [[$:/temp/search]get[text]] }}} configTiddler={{{ [[$:/state/search/currentTab]!is[missing]get[text]] :else[{$:/config/SearchResults/Default}] }}}>
<$list filter="[<userInput>minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="jd-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
<$tiddler tiddler=<<configTiddler>>>
{{$:/core/ui/SearchResults}}
</$tiddler>
</$list>
</$vars>
</$reveal>
</div>
</div>
<!--END Modified-->

<$list filter="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]" variable="currentTiddler">
<$droppable actions=<<drop-actions>>>
<div class="tc-droppable-placeholder">
&nbsp;
</div>
<div class="jd-sidebar-column">
<div class="jd-sidebar-column-header">
<$list variable="checker" filter="[<config-title-sidebar>!text[hide]]" emptyMessage="""
<$button set=<<config-title-sidebar>> setTo="show" dragTiddler=<<currentTiddler>> class="tc-btn-invisible" tag="text">
<<sidebar-title>>
</$button>
""">
<$button set=<<config-title-sidebar>> setTo="hide" dragTiddler=<<currentTiddler>> class="tc-btn-invisible" tag="text">
<<sidebar-title>>
</$button>
</$list>
<div class="jd-sidebar-column-header-buttons">
<$button tooltip="Open in story river" to=<<currentTiddler>> dragTiddler=<<currentTiddler>> class="tc-btn-invisible">{{$:/core/images/open-window}}</$button>
<$button tooltip="Edit this tiddler" dragTiddler=<<currentTiddler>> class="tc-btn-invisible">
<$action-sendmessage $message="tm-edit-tiddler"/>{{$:/core/images/edit-button}}</$button>
<$button tooltip="Remove from sidebar" dragTiddler=<<currentTiddler>> class="tc-btn-invisible">
<$fieldmangler tiddler=<<currentTiddler>>>
<$action-sendmessage $message="tm-remove-tag" $param="$:/tags/SideBar"/>
</$fieldmangler>{{$:/core/images/close-button}}</$button>
</div>
</div>
<$list variable="checker" filter="[<config-title-sidebar>!text[hide]]">
<div class="jd-sidebar-column-header-border"></div>
<div class="jd-sidebar-column-body">

<$transclude/>

</div>
</$list>
</div>
</$droppable>
</$list>
<div style="height:32px;">
</div>
</$scrollable>
2 Likes

@MrLightblub
Thank you so much for fixing the search. Whitespace theme is a beautiful theme. Thanks also for explaining your way through this.